Composable vs mixin comparison in Vue - Hands-On Comparison

Composable vs Mixin Comparison in Vue 3

📖 Scenario: You are building a simple Vue 3 app to understand how to share logic between components using two different methods: mixins and composables. This will help you see how Vue 3's new Composition API improves code reuse and clarity compared to the older mixin approach.

🎯 Goal: Create two Vue components that share the same counter logic. One uses a mixin, and the other uses a composable function. You will see how both work and compare their structure.

📋 What You'll Learn

Create a mixin with a counter data property and an increment method

Create a composable function that returns a counter ref and an increment function

Create a Vue component that uses the mixin to display and increment the counter

Create a Vue component that uses the composable to display and increment the counter

💡 Why This Matters

🌍 Real World

Sharing logic like counters, timers, or form validation across multiple Vue components is common in real apps. Understanding mixins and composables helps you write cleaner, reusable code.

💼 Career

Vue developers often need to refactor legacy mixin code to composables for maintainability and to use modern Vue 3 features effectively.

1

Create a mixin with counter logic

Create a Vue mixin called counterMixin that has a data function returning an object with a count property set to 0, and a method called increment that increases count by 1.

Vue

# Your code here

Hint

Remember, a mixin is an object with data and methods properties.

2

Create a composable function with counter logic

Create a composable function called useCounter that uses Vue's ref to create a count variable initialized to 0. Return an object with count and an increment function that increases count.value by 1.

Vue

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

// Your code here

Hint

Use Vue's ref to create reactive state inside the composable.

3

Create a Vue component using the mixin

Create a Vue component called MixinCounter that uses the counterMixin. In the template, display the count and add a button that calls increment when clicked.

Vue

import { ref } from 'vue';

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

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

// Your code here

Hint

Use the mixins option to include the mixin in the component.

4

Create a Vue component using the composable

Create a Vue component called ComposableCounter that uses the useCounter composable inside the setup function. In the template, display the count and add a button that calls increment when clicked.

Vue

import { ref } from 'vue';

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

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

export default {
  name: 'MixinCounter',
  mixins: [counterMixin],
  template: `
    Mixin count: {{ count }}
    Increment
  `
};

// Your code here

Hint

Use the setup function to call the composable and return its values for the template.

Practice

1. Which statement best describes the main difference between a mixin and a composable in Vue?

easy

A. Mixins are functions, and composables use Vue options like data and methods.

B. Composables are only used in Vue 2, mixins only in Vue 3.

C. Mixins and composables are exactly the same in Vue.

D. Mixins use Vue options like data and methods, while composables are functions using the Composition API.

Solution

1. Step 1: Understand mixin structure

   Mixins use Vue's Options API with properties like data, methods, and lifecycle hooks.

2. Step 2: Understand composable structure

   Composables are plain functions that use Vue's Composition API to share reactive logic.

3. Final Answer:

   Mixins use Vue options like data and methods, while composables are functions using the Composition API. -> Option D

4. Quick Check:

   Mixin = Options API, Composable = Composition API [OK]

Hint: Mixins use options; composables are functions with Composition API [OK]

Common Mistakes:

• Confusing mixins as functions
• Thinking composables use Options API
• Believing mixins and composables are identical

2. Which of the following is the correct syntax to define a composable function in Vue 3?

easy

A. function useCounter() { this.count = 0; }

B. export function useCounter() { const count = ref(0); return { count }; }

C. export default { methods: { useCounter() { return 0; } } }

D. export const useCounter = { data() { return { count: 0 }; } }

Solution

1. Step 1: Identify composable function pattern

   Composable functions are plain functions that return reactive state or methods, often prefixed with 'use'.

2. Step 2: Check syntax correctness

   export function useCounter() { const count = ref(0); return { count }; } defines a function returning a reactive ref, which matches composable pattern.

3. Final Answer:

   export function useCounter() { const count = ref(0); return { count }; } -> Option B

4. Quick Check:

   Composable = function returning reactive state [OK]

Hint: Composable is a function returning reactive refs or state [OK]

Common Mistakes:

• Using object syntax instead of function
• Not returning reactive state
• Using 'this' inside composable function

3. Given this mixin and component code, what will be logged when the button is clicked?

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

export default {
  mixins: [myMixin],
  template: `Click`
}

medium

A. Logs 1, 2, 3 on each click

B. Logs 0 every time

C. Throws an error because count is undefined

D. Logs NaN on each click

Solution

1. Step 1: Understand mixin data and methods

   The mixin provides a reactive count starting at 0 and an increment method that increases count and logs it.

2. Step 2: Check component usage

   The component uses the mixin, so count and increment are available. Each click calls increment, increasing count by 1 and logging it.

3. Final Answer:

   Logs 1, 2, 3 on each click -> Option A

4. Quick Check:

   Mixin data + method increments count [OK]

Hint: Mixin data is reactive and shared in component [OK]

Common Mistakes:

• Assuming count resets each click
• Thinking count is undefined
• Confusing mixin with composable behavior

4. Identify the error in this composable usage inside a Vue component:

import { ref } from 'vue';

function useTimer() {
  const time = ref(0);
  setInterval(() => time.value++, 1000);
  return { time };
}

export default {
  setup() {
    const timer = useTimer;
    return { timer };
  },
  template: `
{{ timer.time }}
`
}

medium

A. setInterval should be inside setup, not composable

B. ref is not imported correctly

C. The composable function is not called; should be useTimer()

D. template syntax is invalid

Solution

1. Step 1: Check composable invocation

   The composable useTimer is assigned without parentheses, so timer is a function reference, not the returned object.

2. Step 2: Understand impact on template

   Since timer is a function, accessing timer.time is undefined, causing template to fail or show nothing.

3. Final Answer:

   The composable function is not called; should be useTimer() -> Option C

4. Quick Check:

   Call composable as function: useTimer() [OK]

Hint: Call composable with () to get returned state [OK]

Common Mistakes:

• Forgetting parentheses when calling composable
• Moving setInterval outside composable unnecessarily
• Misreading template syntax

5. You want to share reactive state and methods between multiple components in Vue 3. Which approach is better and why?

Choose the best option and explain why.

hard

A. Composables share reactive logic clearly and safely with better TypeScript support.

B. Mixins share data and methods but can cause naming conflicts and unclear code.

C. Copy-pasting code is simple but leads to maintenance problems.

D. Global variables break reactivity and make debugging hard.

Solution

1. Step 1: Evaluate mixins drawbacks

   Mixins can cause naming conflicts and make code harder to understand because they merge properties invisibly.

2. Step 2: Evaluate composables benefits

   Composables are explicit functions that return reactive state and methods, improving clarity, reusability, and TypeScript support.

3. Step 3: Consider other options

   Copy-pasting duplicates code, and global variables break Vue's reactivity system.

4. Final Answer:

   Composables share reactive logic clearly and safely with better TypeScript support. -> Option A

5. Quick Check:

   Composable = clear, safe, reusable logic [OK]

Hint: Prefer composables for clear, reusable reactive logic [OK]

Common Mistakes:

• Choosing mixins despite conflicts
• Ignoring reactivity with global variables
• Thinking copy-paste is maintainable