Meteor/Vue: Display result of search

Question

I would like to add a search field to my app and show all articles from my Collection that match the entered value. The searchArticles method is called but the values are not shown as defined below the search field. What am I doing wrong?

Remark: After the comment by @Estus I changed the matchingArticles to be reactive. Still, the list of found articles is not displayed in the list.

<script setup>
import { ref, reactive, computed } from 'vue';
import { ArticlesCollection } from '../../db/ArticlesCollection';
import Article from '../components/Article.vue';
import { subscribe } from 'vue-meteor-tracker';

const articleSearch = ref('');
let matchingArticles = reactive({
  contents: [],
});
const searchArticles = () => {
  this.matchingArticles.contents = ArticlesCollection.find({
    text: articleSearch.value,
  });
};

subscribe('articles');
</script>

<template>
  <form @submit.prevent="searchArticles">
    <input
      v-model="articleSearch"
      class="border border-gray-300 rounded-md py-2 px-4 mr-2 text-gray-600 text-sm focus:outline-none focus:border-gray-400 focus:ring-0"
      type="text"
      placeholder="Type to add new articles"
    />
    <button
      class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
      type="submit"
    >
      Add Article
    </button>
  </form>
  <ul class="list-disc list-inside p-4">
    <Article
      v-for="article of matchingArticles.contents"
      :key="article._id"
      :article="article"
    />
  </ul>
</template>