Vue3: how to retrieve data in vue component from data access object

Question

I would like to use a data access object (dao) to retireve relevant data for a Vue3 component. The dao is called Todos.js, the vue component is called List.vue. Please find exemplaric snippets of my code below.

When starting the app, data is retrieved and shown in the first place, but updates on the data (such as deleting) are not reflecetd in the view. I think this is because I assign a value to a local vue component variable. Vue docs say, through this the reactivity gets lost (see: https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue). How can I re-establish the reactivity, to make my vue-component show the state with the help of my dao?

Todos.js

export default {
    todos: [{
            text: 'yadda yadda',
            checked: false,
        },
        {
            text: 'clean up',
            checked: true,
        },
    ],
    getAll() {
        return this.todos;
    },
    deleteTodo(todo) {
        let elementToDelete = this.todos.find(element => element.text == todo.text);
        this.todos.splice(this.todos.indexOf(elementToDelete, 1));
    },
};

List.vue

<template>
  <li v-for="todo in todos">
    <v-checkbox v-model="todo.checked" :label="todo.text"></v-checkbox>
    <v-btn @click="deleteTodo(todo, $event)"> Delete </v-btn>
  </li>
</template>

<script>
import Todos from '../model/Todos'

export default {
  name: 'List',
  components : {
    Todos,
  },
  data() {
    return {
      todos:Todos.getAll(),
    }
  },
  methods: {
    deleteTodo(todo) {
      Todos.deleteTodo(todo);
    }
  }
}
</script>

Answer 1

I got it: the model itself must be hooked up into vue to be reactive. It works calling the vue-function 'reactive' on my dao.

import { reactive } from 'vue';

export default reactive({
  todos: [
    {
      text: 'yadda yadda',
      checked: false,
    },
    {
      text: 'clean up',
      checked: true,
    },
  ],
  getAll() {
    return this.todos;
  },
  deleteTodo(todo) {
    let elementToDelete = this.todos.find((element) => element.text == todo.text);
    this.todos.splice(this.todos.indexOf(elementToDelete, 1));
  },
});