Can Composition API be used together with the Options API?

VueJunior~1 min read

Yes, Composition API can be used together with the Options API, and this is fully supported by Vue 3. This is called a hybrid approach.

Vue 3 lets you use:

options (data, methods, computed, mounted, etc.)
and Composition API functions at the same time (setup, ref, reactive, onMounted, etc.)

in the same component.

What does this look like?

vue

<script>
import { ref, onMounted } from 'vue'

export default {
  data() {
    return {
      title: 'Options API'
    }
  },

  setup() {
    const count = ref(0)

    onMounted(() => {
      console.log("mounted from Composition API")
    })

    return { count }
  },

  mounted() {
    console.log("mounted from Options API")
  }
}
</script>

<template>
  <h1>{{ title }}</h1>
  <p>Counter: {{ count }}</p>
</template>

This works without issues.

Important nuances of the hybrid approach

1. `setup()` runs before the Options API hooks

Initialization order:

setup()
beforeCreate (from Options API)
created
beforeMount
mounted

2. Variables from `setup` are available in the template

Through return:

setup() {
  const message = ref('Hello')
  return { message }
}

3. You cannot access setup's variables through this inside the Options API

Wrong:

mounted() {
  console.log(this.count) // undefined
}

This is expected, the Composition API is not tied to this.

But the variable is available in the template and from setup.

4. You can use watch/computed in either API

Both variants work:

computed: {
  fullName() { ... }
}

const computedName = computed(() => ... )

5. Use the hybrid approach in moderation

Although this is possible, the Vue team recommends:

for simple components → Options API
for complex logic → Composition API
not mixing the two APIs haphazardly

The hybrid approach is useful when migrating from Vue 2 to Vue 3.

Summary (great for interviews)

Yes, Composition API can be used together with the Options API. Vue 3 fully supports the hybrid approach. setup() runs first, and its variables are available in the template, but not through this. This approach is often used when migrating from Vue 2 or in components where you need to gradually move to the Composition API.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.