如何在Vue.js中将变量推送到另一个组件数组

<template>
  <div>
    <another-component :variable="myVariable"></another-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myVariable: 'Hello world'
    };
  }
};
</script>

<template>
  <div>
    <ul>
      <li v-for="item in variableArray" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['variable'],
  data() {
    return {
      variableArray: []
    };
  },
  watch: {
    variable(newVariable) {
      this.variableArray.push(newVariable);
    }
  }
};
</script>