Vue3 data() {}, I need to store data that is used through out a component

[greenpdx]

IVue2 has data() { return{ wasm: null }} and was accessed by using this.wasm. I am using vite-plugin-rsw to build my rust code for wasm.
I am confused about <script setup lang="ts"> and <script lang="ts"> export default {} for vue3.
I have a simple work demo https://github.com/greenpdx/vuewasm
In App.vue I use <script setup and init() creates a wasm that other calls can use, works

I created components/About.vue for my web-worker using

<script lang=ts> import init, { wgreet, wstartup} from '../../worker/pkg/' export default { async setup() { let wasm = await init() let workr = wstartup() // new Worker in wasm }, methods: { wtry() {// button click wgreet() // wasm web-worker stuff } } because it uses different wasm source. But that wasm is local to the setup function. How do I make it accessible for other functions in the component? Vue2 used data and this.

[chenxch]

I think you should look at how the options writing method is converted to setup, which should be of great help to your subsequent development.
Next, let's talk about the following solutions:

1. If you still use options + setup, you can also write the functions in methods into setup (I tried methods in vue2 before and you can still access the return attribute in setup through this)
2. Use script setup to develop (recommended)

[mbokil]

I suggest not mixing both Options API and Setup() for cleaner code. For new app development consider using <script setup> instead. Your code would look like in plain JS:

<script setup>
let wasm = null
let workr = null

(async () => {
  wasm = await init()
  workr = wstartup() 
})()

// checking if wasm is initialized first
const wtry = ()=> {
  if (wasm) {
    alert('button was clicked wasm ready') 
  else {
    alert('button was clicked wasm NOT ready yet') 
  }
}
</script>

<template>
  <button @click="wtry">Click me</button>
</template>