title: Vue 3 composition API: issue with computed to filter array
body: <p>I am learning the <strong>Vue 3 composition API</strong> and I did a simple post list (simply creating an array of post in the setup() with tags for each posts) as below first code section.
  Then I have a component PostList to display those posts and a TagCloud to show all the existing tags.
  I am trying to filter the posts by clicking on a tag.</p>
  <ul>
  <li>I managed to emit the tag from the component TagCloud</li>
  <li>I try to filter filter my list of posts (tils) with a computed but... it doesn't work</li>
  </ul>
  <p>Below are the 3 elements working together, can anyone spot what's wrong?</p>
  <p><em>The main view</em></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;home&quot;&gt;
      &lt;h1&gt;Today I learned (TIL)&lt;/h1&gt;
      &lt;div class=&quot;layout&quot;&gt;
        &lt;TagCloud :tils=&quot;tils&quot; @tag=&quot;filterTils&quot; /&gt;
        &lt;PostList :tils=&quot;filterTils&quot; /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import PostList from &quot;../components/PostList.vue&quot;;
  import TagCloud from &quot;../components/TagCloud.vue&quot;;
  import { ref, computed } from &quot;vue&quot;;
  
  export default {
    name: &quot;Til&quot;,
    components: { PostList, TagCloud },
    setup() {
      const tils = ref([
        {
          title: &quot;Symbol#to_proc conversion&quot;,
          description: &quot;map(&amp;:to_i) is exactly the same as map { |x| x.to_i }&quot;,
          tags: [&quot;ruby&quot;],
        },
        {
          title: &quot;Symbol#to_proc conversion&quot;,
          description:
            &quot;Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum &quot;,
          tags: [&quot;lorem&quot;],
        },
        {
          title: &quot;Symbol#to_proc conversion&quot;,
          description: &quot;map(&amp;:to_i) is exactly the same as map { |x| x.to_i }&quot;,
          tags: [&quot;ruby&quot;],
        },
      ]);
  
      const filterTils = computed((tag) =&gt; {
        return tils.value.filter((til) =&gt; til.tags.includes(tag));
      });
      
      return { tils, filterTils };
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p><em>The tag cloud component</em></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;tag-cloud&quot;&gt;
      &lt;h3&gt;Tags&lt;/h3&gt;
      &lt;div v-for=&quot;tag in tags&quot; :key=&quot;tag&quot;&gt;
        &lt;div @click=&quot;filterTag(tag)&quot; class=&quot;uniq-tag&quot;&gt;#{{ tag }}&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import useTags from &quot;../composables/useTags&quot;;
  
  export default {
    props: [&quot;tils&quot;],
    setup(props, context) {
      const { tags } = useTags(props.tils);
      const filterTag = (tag) =&gt; {
        context.emit(&quot;tag&quot;, tag);
      };
      return { tags, filterTag };
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p><em>the post list component</em></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;til-list&quot;&gt;
      &lt;div v-for=&quot;til in tils&quot; :key=&quot;til&quot;&gt;
        &lt;div class=&quot;til&quot;&gt;
          &lt;h3&gt;{{ til.title }}&lt;/h3&gt;
          &lt;p&gt;{{ til.description }}&lt;/p&gt;
          &lt;span v-for=&quot;tag in til.tags&quot; :key=&quot;tag&quot;&gt; #{{ tag }} &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: [&quot;tils&quot;],
  };
  &lt;/script&gt;
  </code></pre>