How to specify the name of a variable from data in a template in a loop?

Question

Vue.js

<div v-for="(elem, key) in data" :="key">{{ elem }}</div

export default {
  data() {
    return {
      a: 1,
      b: "some",
      c: [1, 2, 3],
      data: ['a', 'b', 'c']
    }
  }
}

data in the loop is an array like this ['a', 'b', 'c'].
And I want the value of my variable to be displayed, not the string ab or c.

Answer 1

<div
      v-for="(elem, key) in data"
      :key="key"
    >
      {{ $data[elem] }}
    </div>

Answer 2

At a glance, I see two options:
1. wrap your variables a, b, c in an object:

export default {
  data() {
    return {
      myVars: {
           a: 1,
           b: "some",
           c: [1, 2, 3],
      },
      data: ['a', 'b', 'c'],
    }
  }
}

<div v-for="(elem, key) in data" :="key">{{ myVars[elem] }}</div>

2. Make a method to get the values ​​of variables by their name:

export default {
  data() {
    return {
      a: 1,
      b: "some",
      c: [1, 2, 3],
      data: ['a', 'b', 'c'],
    }
  },
  methods: {
     getDataValue(param) {
            return this[param] || null;
      },
   },
}

<div v-for="(elem, key) in data" :="key">{{ getDataValue(elem) }}</div>