diff --git a/public/app/features/variables/custom/actions.test.ts b/public/app/features/variables/custom/actions.test.ts
index d537fb1b414..1e568d0d3f4 100644
--- a/public/app/features/variables/custom/actions.test.ts
+++ b/public/app/features/variables/custom/actions.test.ts
@@ -58,7 +58,7 @@ describe('custom actions', () => {
         .whenAsyncActionIsDispatched(updateCustomVariableOptions(toKeyedVariableIdentifier(variable)), true);
 
       tester.thenDispatchedActionsShouldEqual(
-        toKeyedAction('key', createCustomOptionsFromQuery(toVariablePayload(variable))),
+        toKeyedAction('key', createCustomOptionsFromQuery(toVariablePayload(variable, variable.query))),
         toKeyedAction('key', setCurrentVariableValue(toVariablePayload(variable, { option })))
       );
     });
diff --git a/public/app/features/variables/custom/actions.ts b/public/app/features/variables/custom/actions.ts
index 898412fe49b..d8751dd56ed 100644
--- a/public/app/features/variables/custom/actions.ts
+++ b/public/app/features/variables/custom/actions.ts
@@ -1,16 +1,23 @@
+import { getTemplateSrv } from '@grafana/runtime';
 import { ThunkResult } from 'app/types';
 
 import { validateVariableSelectionState } from '../state/actions';
 import { toKeyedAction } from '../state/keyedVariablesReducer';
+import { getVariable } from '../state/selectors';
 import { KeyedVariableIdentifier } from '../state/types';
 import { toVariablePayload } from '../utils';
 
 import { createCustomOptionsFromQuery } from './reducer';
 
 export const updateCustomVariableOptions = (identifier: KeyedVariableIdentifier): ThunkResult<void> => {
-  return async (dispatch) => {
+  return async (dispatch, getState) => {
     const { rootStateKey } = identifier;
-    await dispatch(toKeyedAction(rootStateKey, createCustomOptionsFromQuery(toVariablePayload(identifier))));
+    const variable = getVariable(identifier, getState());
+    if (variable.type !== 'custom') {
+      return;
+    }
+    const query = getTemplateSrv().replace(variable.query);
+    await dispatch(toKeyedAction(rootStateKey, createCustomOptionsFromQuery(toVariablePayload(identifier, query))));
     await dispatch(validateVariableSelectionState(identifier));
   };
 };
diff --git a/public/app/features/variables/custom/adapter.ts b/public/app/features/variables/custom/adapter.ts
index c98374f195d..c4eb01b5276 100644
--- a/public/app/features/variables/custom/adapter.ts
+++ b/public/app/features/variables/custom/adapter.ts
@@ -6,7 +6,7 @@ import { ALL_VARIABLE_TEXT } from '../constants';
 import { optionPickerFactory } from '../pickers';
 import { setOptionAsCurrent, setOptionFromUrl } from '../state/actions';
 import { CustomVariableModel } from '../types';
-import { isAllVariable, toKeyedVariableIdentifier } from '../utils';
+import { containsVariable, isAllVariable, toKeyedVariableIdentifier } from '../utils';
 
 import { CustomVariableEditor } from './CustomVariableEditor';
 import { updateCustomVariableOptions } from './actions';
@@ -21,8 +21,8 @@ export const createCustomVariableAdapter = (): VariableAdapter<CustomVariableMod
     reducer: customVariableReducer,
     picker: optionPickerFactory<CustomVariableModel>(),
     editor: CustomVariableEditor,
-    dependsOn: () => {
-      return false;
+    dependsOn: (variable, variableToTest) => {
+      return containsVariable(variable.query, variableToTest.name);
     },
     setValue: async (variable, option, emitChanges = false) => {
       await dispatch(setOptionAsCurrent(toKeyedVariableIdentifier(variable), option, emitChanges));
diff --git a/public/app/features/variables/custom/reducer.test.ts b/public/app/features/variables/custom/reducer.test.ts
index 23ad676a298..f80f1e7ebf8 100644
--- a/public/app/features/variables/custom/reducer.test.ts
+++ b/public/app/features/variables/custom/reducer.test.ts
@@ -18,7 +18,7 @@ describe('customVariableReducer', () => {
       const query = 'a,b,c,d : e';
       const id = '0';
       const { initialState } = getVariableTestContext(adapter, { id, query });
-      const payload = toVariablePayload({ id: '0', type: 'custom' });
+      const payload = toVariablePayload({ id: '0', type: 'custom' }, query);
 
       reducerTester<VariablesState>()
         .givenReducer(customVariableReducer, cloneDeep(initialState))
@@ -58,7 +58,7 @@ describe('customVariableReducer', () => {
       const query = 'a,b,c,d:e';
       const id = '0';
       const { initialState } = getVariableTestContext(adapter, { id, query });
-      const payload = toVariablePayload({ id: '0', type: 'custom' });
+      const payload = toVariablePayload({ id: '0', type: 'custom' }, query);
 
       reducerTester<VariablesState>()
         .givenReducer(customVariableReducer, cloneDeep(initialState))
@@ -98,7 +98,7 @@ describe('customVariableReducer', () => {
       const query = 'a,  b,   c, d : e  ';
       const id = '0';
       const { initialState } = getVariableTestContext(adapter, { id, query });
-      const payload = toVariablePayload({ id: '0', type: 'constant' });
+      const payload = toVariablePayload({ id: '0', type: 'constant' }, query);
 
       reducerTester<VariablesState>()
         .givenReducer(customVariableReducer, cloneDeep(initialState))
@@ -138,7 +138,7 @@ describe('customVariableReducer', () => {
       const query = 'a,  b,   c, d :    e';
       const id = '0';
       const { initialState } = getVariableTestContext(adapter, { id, query });
-      const payload = toVariablePayload({ id: '0', type: 'constant' });
+      const payload = toVariablePayload({ id: '0', type: 'constant' }, query);
 
       reducerTester<VariablesState>()
         .givenReducer(customVariableReducer, cloneDeep(initialState))
@@ -178,7 +178,7 @@ describe('customVariableReducer', () => {
       const query = 'a,  b,http://www.google.com/, http://www.amazon.com/';
       const id = '0';
       const { initialState } = getVariableTestContext(adapter, { id, query });
-      const payload = toVariablePayload({ id: '0', type: 'constant' });
+      const payload = toVariablePayload({ id: '0', type: 'constant' }, query);
 
       reducerTester<VariablesState>()
         .givenReducer(customVariableReducer, cloneDeep(initialState))
@@ -218,7 +218,7 @@ describe('customVariableReducer', () => {
       const query = 'a,  b, google : http://www.google.com/, amazon : http://www.amazon.com/';
       const id = '0';
       const { initialState } = getVariableTestContext(adapter, { id, query });
-      const payload = toVariablePayload({ id: '0', type: 'constant' });
+      const payload = toVariablePayload({ id: '0', type: 'constant' }, query);
 
       reducerTester<VariablesState>()
         .givenReducer(customVariableReducer, cloneDeep(initialState))
@@ -258,7 +258,7 @@ describe('customVariableReducer', () => {
       const query = 'a,b,c,d : e';
       const id = '0';
       const { initialState } = getVariableTestContext(adapter, { id, query, includeAll: true });
-      const payload = toVariablePayload({ id: '0', type: 'constant' });
+      const payload = toVariablePayload({ id: '0', type: 'constant' }, query);
 
       reducerTester<VariablesState>()
         .givenReducer(customVariableReducer, cloneDeep(initialState))
diff --git a/public/app/features/variables/custom/reducer.ts b/public/app/features/variables/custom/reducer.ts
index c021decc8dd..15d7d9592dd 100644
--- a/public/app/features/variables/custom/reducer.ts
+++ b/public/app/features/variables/custom/reducer.ts
@@ -20,15 +20,15 @@ export const customVariableSlice = createSlice({
   name: 'templating/custom',
   initialState: initialVariablesState,
   reducers: {
-    createCustomOptionsFromQuery: (state: VariablesState, action: PayloadAction<VariablePayload>) => {
+    createCustomOptionsFromQuery: (state: VariablesState, action: PayloadAction<VariablePayload<string>>) => {
       const instanceState = getInstanceState(state, action.payload.id);
       if (instanceState.type !== 'custom') {
         return;
       }
 
-      const { includeAll, query } = instanceState;
-
-      const match = query.match(/(?:\\,|[^,])+/g) ?? [];
+      const { includeAll } = instanceState;
+      const queryInterpolated = action.payload.data;
+      const match = queryInterpolated.match(/(?:\\,|[^,])+/g) ?? [];
       const options = match.map((text) => {
         text = text.replace(/\\,/g, ',');
         const textMatch = /^(.+)\s:\s(.+)$/g.exec(text) ?? [];
diff --git a/public/app/features/variables/state/actions.test.ts b/public/app/features/variables/state/actions.test.ts
index 094ded8c786..14f86972547 100644
--- a/public/app/features/variables/state/actions.test.ts
+++ b/public/app/features/variables/state/actions.test.ts
@@ -231,7 +231,7 @@ describe('shared actions', () => {
           toKeyedAction(
             key,
             createCustomOptionsFromQuery(
-              toVariablePayload({ ...custom, id: dispatchedActions[4].payload.action.payload.id })
+              toVariablePayload({ ...custom, id: dispatchedActions[4].payload.action.payload.id }, '')
             )
           )
         );
diff --git a/public/app/features/variables/state/processVariable.test.ts b/public/app/features/variables/state/processVariable.test.ts
index 5cea2d1de9b..92867f02116 100644
--- a/public/app/features/variables/state/processVariable.test.ts
+++ b/public/app/features/variables/state/processVariable.test.ts
@@ -131,7 +131,7 @@ describe('processVariable', () => {
 
           expect(dispatchedActions[0]).toEqual(toKeyedAction(key, variableStateFetching(toVariablePayload(custom))));
           expect(dispatchedActions[1]).toEqual(
-            toKeyedAction(key, createCustomOptionsFromQuery(toVariablePayload(custom)))
+            toKeyedAction(key, createCustomOptionsFromQuery(toVariablePayload(custom, 'A,B,C')))
           );
           expect(dispatchedActions[2].type).toEqual('templating/keyed/shared/setCurrentVariableValue');
           expect(dispatchedActions[3]).toEqual(toKeyedAction(key, variableStateCompleted(toVariablePayload(custom))));