Component can't access `$props` in template when using `mountSuspended` from test utils

<script setup lang="ts">
import { twMerge } from "tailwind-merge";

import type { BookCategory } from "~/types/bookCategory.types";

defineProps<{
  bookCategory: BookCategory;
}>();
</script>

<template>
  <div
    :style="`background-color: ${$props.bookCategory.category_color}`"
  >
    <UIcon name="i-heroicons-qr-code-20-solid" />
    {{ $props.bookCategory.category_label }}
  </div>
</template>

// @vitest-environment nuxt
import { faker } from "@faker-js/faker";
import { mountSuspended } from "@nuxt/test-utils/runtime";
import { describe, expect, it } from "vitest";

import BookCategoryChip from "../BookCategoryChip.vue";

describe("<BookCategoryChip/>", () => {
  it("renders the book category label", async () => {
    const MOCK_CATEGORY = {
      id: faker.string.uuid(),
      category_color: faker.color.rgb(),
      category_user_id: faker.string.uuid(),
      category_label: faker.word.adjective(),
    };
    const component = await mountSuspended(BookCategoryChip, {
      props: {
        bookCategory: MOCK_CATEGORY,
      },
    });
    expect(component.text()).toContain(MOCK_CATEGORY.category_label);
  });
});

import { defineVitestConfig } from "@nuxt/test-utils/config";

export default defineVitestConfig({
  // any custom Vitest config you require
  test: {
    include: ["**/__tests__/*.test.ts"],
    exclude: ["e2e/"]
  },
});