How to dynamically load a list in Vue?

Question

Vue.js

There is a code https://codesandbox.io/s/84w0wjk612
When you click on Element 1, Element 2, Element 3... a list with a drop-down menu should appear on the right and the items of this menu should be taken from the elements array, which is inside each element .
Accordingly, when element 1 is open, and after clicking on element 2, elements from the array of the current active element should be loaded into the right list.
Question: tell me the solution?

Answer 1

<template>
  <div class="hello">
    <ul>
      <li v-for="item in questions" :key="item.title" @click="toRightArray(item.elements)">{{ item.title }}</li>
    </ul>
    <div class="right">
      <ul>
        <li v-for="item in rightArray" :key="item">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

in data property rightArray: [],
in methods:

toRightArray(items) {
      items.forEach(el => {
        this.rightArray.push(el.title)
      })
    }