Vue不会在for循环中的数组更改时更新props数据

<template>
  <div>
    <child-component :items="items"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: ['item1', 'item2', 'item3']
    };
  },
  methods: {
    changeItem(index, newItem) {
      // 使用Vue.set()方法更新数组中的元素
      Vue.set(this.items, index, newItem);
    }
  }
};
</script>

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
};
</script>