When I make a project migration from vue2 to vue3, in the vue3 script setup segment, there is a variable, but I need to access it in the method in export default part which is from vue2 project. If I access it directly, it will throw an error which means ‘undefined’ or ‘not defined’.

<template>
  <button @click="btnClick">{{layout}}</button>
</template>

<script setup>
  import { ref } from 'vue'
  const layout = ref("someting")
  defineOptions({
    name: 'App'
  });
</script>

<script>
  export default {
    name: 'MyApp',
    methods: {
      btnClick: function(e){
        console.log(layout)
      }
    }
  }
</script>

The error detail informaiton is below:

Uncaught ReferenceError: layout is not defined
    btnClick App.vue:19
    0 App.vue:2
    callWithErrorHandling runtime-core.esm-bundler.js:195
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:202
    invoker runtime-dom.esm-bundler.js:693
    addEventListener runtime-dom.esm-bundler.js:644
    patchEvent runtime-dom.esm-bundler.js:662
    patchProp runtime-dom.esm-bundler.js:739
    mountElement runtime-core.esm-bundler.js:4641