Как я могу сделать шаблон динамическим? Я хочу field.title.arrayName быть text1.arrayName , text2.arrayName и так далее…

 Vue.component('box', {
  props: ['field'],
  template: `
      <div>
        <p>Total:{{ field.title   '.arrayName.length' }}</p>
      </div>

      <div>
        <card-stack v-for="x in field.title   '.arrayName'" v-bind:course="x"></card-stack>
      </div>
    `
})

new Vue({
  el: 'main',
  data: {
    fields: [
      { title: 'text1' },
      { title: 'text2' },
    ],
  }
})
  

И это мой HTML:

 <main>
    <box v-for="x in fields" v-bind:field="x"></box>
</main>
  

Кроме того, text1 и text2 являются именами компонентов:

 var text1 = new Vue({
  el: '#text1',
  data: {
    arrayName: [
      { title: 'example' },
    ],
  }
})
  

примечание

Пожалуйста, отредактируйте заголовок моего вопроса, поскольку я действительно не знаю, как это описать

использование eval() работ:

<p>Total:{{ eval(field.title '.arrayName.length') }}</p>

<card-stack v-for="x in eval(field.title '.arrayName')" :course="x"></card-stack>