ContentList not reacting to changes in computed query

[james-tyner]

Environment

• Operating System: Darwin
• Node Version: v18.9.0
• Nuxt Version: 3.0.0-rc.13
• Nitro Version: 0.6.1
• Package Manager: [email protected]
• Builder: vite
• User Config: target, app, css, modules, content, image
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected]
• Build Modules: -

Reproduction

<template>
    <div>
        <div>
            <div>
                <div class="button" v-on:click="toggleFilter(null)">
                    All
                </div>

                <div class="button" v-on:click="toggleFilter('design')">
                    Design
                </div>

                <div class="button" v-on:click="toggleFilter('dev')">
                    Development
                </div>
            </div>

            <div id="projects-list">
                <ContentList :query="projectsQuery" v-slot="{ list }">
                    <nuxt-link :to="project.ref" v-for="project in list" :key="project.index">
                        <p class="project-name">{{project.title}}</p>
                        <small class="project-year">{{project.year}}</small>
                    </nuxt-link>
                </ContentList>
            </div>

        </div>
    </div>
</template>

<script>
  export default {
    data:function(){
      return {
        filter:null
      }
    },
    computed:{
      projectsQuery:function(){
        // sorts list of projects by year descending, title A-Z
        let baseQuery = { path: "/projects", sort: { title: 1, year: -1 } };

        if (this.filter != null){

          baseQuery = {
            ...baseQuery,
            where: {
              types: {
                $contains: this.filter
              }
            }
          }
        }

        return baseQuery;
      }
    },
    methods:{
      toggleFilter:function(type){
        this.filter = type;
      }
    }
  }
</script>

Describe the bug

I am using a <ContentList> to render a list of items from one of my content folders.

I would like the user of the site to be able to filter the list using buttons. Each button corresponds to a category, and each item in the content folder has multiple categories described in its frontmatter like this:

ref: example
title: Example project
types:
  - design
  - dev
year: 2021

I'm using the query prop on the ContentList to filter based on categories. I have created it as a computed property, as you can see in the Reproduction above.

The query does work when I specify it directly in the computed property before rendering the page, but it does not work when the query is set in response to the user clicking on a filter button. What I see instead is the list with the baseQuery I specified in my Reproduction above applied. The list does not change as the where parameter is added to it.

I have verified that the projectsQuery computed property is changing in response to the user input. It's just the content list that's not changing.

Am I doing something wrong? Is this an expected behavior? Or is this a bug?

Additional context

No response

Logs

No response