Is there any way to access Option API's data, computed property, methods in Composition API and Composition API's data, computed property and methods in Option API in a same Vue Single File Component(SFC)

CodePudding user response：

You can return anything from setup in Composition API and use in Options API. Playground

<script>
import { ref } from 'vue'
export default {
  setup() {
    const compositionRef = ref("Composition")
    return {
      compositionRef
    }
  },
  data () {
    return {
      optionsRef: "Options"
    }
  },
  computed: {
    inOptionsFromComposition () {
      return this.compositionRef
    }
  }
}
</script>

<template>
  <h1>{{ compositionRef }}</h1>
  <h1>{{ optionsRef }}</h1>
  <h1>{{ inOptionsFromComposition }}</h1>
</template>

CodePudding user response：

Composition API to Option API in Same Component

As @tauzN answered you can return anything from setup in Composition API and use in Options API. See @tauzN's answer for code example

Option API to Composition API in Same Component

As Vue js official doc suggest,

Note that the setup() hook of Composition API is called before any Options API hooks, even beforeCreate(). link

So we can't access data,computed property or methods from Composition API to Option API.