@Setup() Decorator Ineffective when using mixins() with extends

[hellokvn]

Environment

• Vue version: ^3.5.13
• Vite version: ^6.2.4
• VSC version: Latest stable
• OS: macOS 14.0 (Sonoma)
• Hardware: MacBook M1
• Node version: 22.x.x
• PNPM version: 10.6.3
• vue-facing-decorator versions: 3.0.4, 4.0.1
• ESLint version: 9.22.0
• eslint-plugin-vue version: 10.0.0
• Volar/Vue Official VSC extension: 2.2.10

Description

When using the mixins() function in combination with extends in a Vue component, the @Setup() decorator in the extended class/component does not function as expected. The @Setup() logic appears to have no effect in this scenario.

It’s unclear whether this behavior is a bug or intentional. Could you clarify if this is the expected behavior or an issue that needs to be addressed?

Important: useRoute is here just an example. I'm fully aware that the route in globally accessable by this.$route. That works perfectly fine. But I got the same issue with using any Pinia store!

Bug

The console.log in test.composable.ts/created returns TestComposable {route: undefined}.

Expected behaviour

The console.log in test.composable.ts/created should return the actual route.

Use Case

I’m working with a large Vue component and want to split its methods into multiple helper classes to improve maintainability. These helper classes should not include templates/HTML but still need access to the Vue instance (e.g., to use @Setup(), Vue Router, Pinia, etc.) while maintaining a class-based approach.

Currently, using a standard Vue composable function works well for this purpose, but I prefer to adhere to a class-based philosophy to maintain consistency in my codebase. The issue with @Setup() in the described setup prevents me from achieving this. Luckily, @Inject() works fine and is an considerable workaround.

Repository

Link: https://github.com/hellokvn/vue-facing-bug

1. git clone [email protected]:hellokvn/vue-facing-bug.git
2. pnpm install
3. pnpm run dev

Some example code

HomeView.vue:

<script lang="ts">
import TheWelcome from "../components/TheWelcome.vue";
import { Component, mixins, Setup, Vue } from "vue-facing-decorator";
import { useRoute } from "vue-router";
import TestComposable from "./test.composable.ts";

@Component({
  components: { TheWelcome },
})
export default class HomeView extends mixins(TestComposable) {
  private created(): void {
    console.log("HomeView");
  }
}
</script>

<template>
  <main>
    <div>HomeView</div>
    <TheWelcome />
  </main>
</template>

test.composable.ts:

import { Component, Setup, Vue } from "vue-facing-decorator";
import { useRoute } from "vue-router";

@Component({})
export default class TestComposable extends Vue {
  @Setup(() => useRoute())
  private readonly route!: ReturnType<typeof useRoute>;

  private created(): void {
    console.log("TestComposable", { route: this.route }); // Does not work
  }
}

Screenshots