My requirement is very basic and easy, but not sure why even ChatGPT keeps giving me answer that has warning messages.

I am using Vue 2.
I have three nested components: GrandParentComponent, ParentComponent, ChildComponent.

Now I have a data someId in GrandParentComponent and I want to pass this data all the way down to the ChildComponent and change it.

GrandComponent.vue:

<template>
  <div>
    {{ someId }}
    <ParentComponent :someId.sync="someId"/>
  </div>
</template>

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

export default {
  components: {
    ParentComponent
  },
  data() {
    return {
      someId: [] // Initial value
    };
  }
};
</script>

ParentComponent.vue::

<template>
  <div>
    <ChildComponent :someId.sync="someId"/>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  props: {
    someId: {
      type: Array,
      required: true
    }
  }
}
</script>

ChildComponent.vue:

<template>
  <div>
    <button @click="selectIds">Select IDs</button>
  </div>
</template>

<script>
export default {
  props: {
    someId: {
      type: Array,
      required: true
    }
  },
  methods: {
    selectIds() {
      // Simulate generating new ids
      const randomIds = [1, 2, 3];

      // Emit the update event with the new ids
      this.$emit('update:someId', randomId);
    }
  }
};
</script>

The above code is generated by ChatGPT and it can work, however, it keeps showing following message in the browser console:

Is there any reason why it shows this warning message? How can I fix this warning issue?
Is it the correct way to pass the props value and change the value in Vue?