Vue2 Opitons api to Vue 3 Composition api

<template>
  <div>{{ userInfo }}</div>
</template>

export default {
  name: 'Sample',
  data() {
    return {
      userInfo: {}
    }
  },
  created() {
    this.userInfo = { name: 'Casey Adams', age: 80 }
  }
}

<template>
  <div>{{ data.userInfo }}</div>
</template>

import { reactive } from 'vue'

const data = reactive({
  userInfo: {}
})

data.userInfo = { name: 'Casey Adams', age: 80 }

<template>
  <div>{{ married | toMarried }}</div>
</template>

export default {
  name: 'Sample',
  filters: {
    toMarried(value) {
      return value ? 'Yes' : 'No'
    }
  }
}

<template>
  <div>{{ toMarried(data.married) }}</div>
</template>

function toMarried(value) {
  return value ? 'Yes' : 'No'
}

import { getCurrentInstance } from 'vue'

const $vm = getCurrentInstance()
const router = $vm.proxy.$router
const route = $vm.proxy.$route
const store = $vm.proxy.$store

export default {
  methods: {
    onSubmit(propName) {
      this[propName] = '123'
      this.$emit(propName + '-change')
    }
  }
}