Composable vs mixin comparison in Vue - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Key difference between composables and mixins in Vue 3

Which statement best describes a key difference between composables and mixins in Vue 3?

A Mixins are only usable in Vue 2; composables are exclusive to Vue 3 and cannot be used in Vue 2.

B Composables require class-based components; mixins work only with functional components.

C Composables automatically merge component templates; mixins only merge JavaScript logic.

D Mixins merge data and methods into components causing potential naming conflicts; composables return reusable logic without merging, avoiding conflicts.

💡 Hint

Think about how data and methods are combined in components.

Mixins merge their properties into the component, which can cause naming conflicts if multiple mixins use the same names. Composables are functions that return reactive state and logic, letting you use them without merging, so conflicts are avoided.

❓ component_behavior

intermediate

Output of component using mixin vs composable

Given the following Vue 3 component code, what will be the rendered output?

Vue

import { ref } from 'vue';

const useCounter = () => {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
};

const counterMixin = {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

export default {
  name: 'TestComponent',
  mixins: [counterMixin],
  setup() {
    const { count: compCount, increment: compIncrement } = useCounter();
    return { compCount, compIncrement };
  },
  template: `<div>
    <p>Mixin count: {{ count }}</p>
    <button @click="compIncrement">Increment</button>
  </div>`
};

A <div><p>Mixin count: 0</p><button>Increment</button></div> and clicking button increments both mixin and composable counts

B <div><p>Mixin count: 0</p><button>Increment</button></div> and clicking button increments composable count but not displayed

C <div><p>Mixin count: 0</p><button>Increment</button></div> but clicking button causes error due to conflict

D <div><p>Mixin count: 0</p><button>Increment</button></div> and clicking button increments mixin count displayed

💡 Hint

Consider which count is displayed and which increment function is called.

The template uses {{ count }} from the mixin's data(), which stays at 0. The setup() renames composable properties to compCount and compIncrement. The button calls the composable's compIncrement, incrementing compCount but since it's not displayed, the visible count stays at 0.

❓ lifecycle

advanced

Lifecycle hook behavior in mixins vs composables

In Vue 3, how do lifecycle hooks behave differently when used inside mixins compared to composables?

A Mixin lifecycle hooks are merged and called automatically; composable lifecycle hooks must be called inside setup() explicitly.

B Composable lifecycle hooks run before mixin hooks; mixin hooks run only once per app.

C Mixin lifecycle hooks are ignored in Vue 3; only composable hooks run.

D Composable lifecycle hooks are merged like mixins but require manual registration.

💡 Hint

Think about how lifecycle hooks are declared and triggered in each pattern.

Mixins declare lifecycle hooks as component options and Vue merges and calls them automatically. Composables use special functions like onMounted inside setup(), so they run only if called inside setup().

📝 Syntax

advanced

Identify the syntax error in this mixin usage

What is the syntax error in the following Vue 3 component using a mixin?

const myMixin = {
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    greet() {
      console.log(this.message)
    }
  }
}

export default {
  name: 'MyComponent',
  mixins: myMixin,
  template: ``
}

A methods must be declared inside setup() in Vue 3

B data() must be a function returning a function, not an object

C mixins should be an array, so it should be mixins: [myMixin]

D template must be a separate .vue file, not inline string

💡 Hint

Check the type expected for the mixins option.

The mixins option expects an array of mixin objects. Writing mixins: myMixin passes an object instead of an array, causing a syntax error.

🔧 Debug

expert

Debugging reactive state sharing issue between composables

Two components import the same composable which returns a reactive object. Both components modify the reactive object but changes do not reflect across components. Why?

Vue

export function useSharedState() {
  const state = reactive({ count: 0 });
  const increment = () => { state.count++ };
  return { state, increment };
}

// Component A and Component B both import and call useSharedState() separately

A Each component calls useSharedState() creating separate reactive objects; state is not shared.

B Reactive objects cannot be shared between components in Vue 3.

C The reactive object must be wrapped in ref() to share state.

D The composable must be registered globally to share state.

💡 Hint

Consider how functions returning reactive objects behave when called multiple times.

Each call to useSharedState() creates a new reactive object. So components get independent state copies. To share state, the reactive object must be defined outside the function or use a shared singleton pattern.