I have a parent and child component. When I hit the button, I want to send parent and child component data to server. I know there are a couple of ways to get the data from child. $ref and $emit. Is there a nicer way to get child component data?

An example.

Parent

<ToDoList />

<button @click='sendDataToServer' />
<script>

methods: {
  sendDataToServer() {
    ajax call to send parent and child data
  }
}
</script>


Child <ToDoList>

<div v-for="item in items">
  <input type="text" v-model="name" />
  <input type="checkbox" v-model="checked />
</div>
<div><button @click="addToDo" /></div>

<script>
  data() {
    return {
      items: [],
    };
  },
  methods: {
    addToDo() {
       this.items.push({ name: '', checked: false })
    }
  }
</script>

Vue component communication between parent and child