title: How to make ref arrays work in Vue 3 composition API when passing them to child components?
body: <p>I have the following todo app with these two components: <code>App</code> and <code>Todo</code></p>
  <p><strong>App.vue</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;todo-list&quot;&gt;
      &lt;div :key=&quot;index&quot; v-for=&quot;(todo, index) in state.todos&quot;&gt;
        &lt;Todo :todo=&quot;todo&quot; :state=&quot;state&quot; /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { reactive } from '@vue/composition-api';
  import Todo from './components/Todo.vue';
  
  export default {
    components: {
      Todo
    },
    setup() {
      let state = reactive({
        todos: [
          { text: 'Learn about Vue', isCompleted: false },
          { text: 'Meet friend for lunch', isCompleted: false },
          { text: 'Build really cool todo app', isCompleted: false }
        ]
      });
  
      return { state };
    }
  };
  &lt;/script&gt;
  
  </code></pre>
  <p><strong>Todo.vue</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;todo&quot;&gt;{{ todo.text }}&lt;button @click=&quot;deleteTodo&quot;&gt;x&lt;/button&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ['todo', 'state'],
    setup({ todo, state }) {
      const deleteTodo = () =&gt; {
        state.todos = state.todos.filter(t =&gt; t != todo);
      };
  
      return {
        deleteTodo
      };
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p>The <code>deleteTodo</code> function works fine in the <strong>Todo.vue</strong> component, however, I would like to know if it's possible not to pass a <code>state</code> object but rather use a <code>ref()</code> like so and pass the  <code>todos</code>...</p>
  <p>So in <strong>App.vue</strong></p>
  <pre class="lang-js prettyprint-override"><code>//...
      let todos = ref({[
          { text: 'Learn about Vue', isCompleted: false },
          { text: 'Meet friend for lunch', isCompleted: false },
          { text: 'Build really cool todo app', isCompleted: false }
        ]);
  //...
  </code></pre>
  <p>Instead of:</p>
  <pre class="lang-js prettyprint-override"><code>//...
     let state = reactive({
        todos: [
          { text: 'Learn about Vue', isCompleted: false },
          { text: 'Meet friend for lunch', isCompleted: false },
          { text: 'Build really cool todo app', isCompleted: false }
        ]
      });
  //...
  </code></pre>
  <p>However, when I try to do this... the child is unable to filter the deleted todo and re-assign to the <code>todos</code> variable. This doesn't work.</p>
  <p>Any ideas how I can make it work with <code>ref</code>?</p>