Version

3.2.22

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Create a single-file component with a script setup block declaring a ref:

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

Additionally, define a computed that tries to use this value from this:

<script>
export default {
  computed: {
    computedCount() {
      return this.count;
    }
  }
}
</script>

In the template, show both values:

<template>
  <button @click="count++">The count is {{ count }}</button>
  <p>The computed  count is {{ computedCount }}</p>
</template>

When using the development setup prepared by vue-cli, both variables work. When actually building the project, only the first one works.

What is expected?

Development and build should match.

Variables declared in script setup should not be present on this, even in development.

Alternatively, when SFCs are built, variables declared in script setup should be made available on this.

What is actually happening?

In development, you can access variables declared in script setup via this.varName.

In production, you can't.

I ran into this after trying to deploy a project that uses script setup and accesses declared variables on the this instance. This worked fine in development, but not after building the project.

Test project: https://github.com/apeschar/script-setup-reproduction-vue3

The script setup should always go after the regular script. This is irrelevant in this scenario as there shouldn't be a computed option used when using script setup anyway. Also, when using script setup, I recommend you to use the regular script only for things that cannot be done within the script setup.

Okay, but does it really make sense for this to work in the dev server, but not in a production built? Isn't that confusing?

Okay, but does it really make sense for this to work in the dev server, but not in a production built? Isn't that confusing?

agree，it makes me confused, maybe add tips in doc will better, actually <script setup> is also not same as setup() in options api, setup() return object can find in 'setupState'， but <script setup> not, i think not mix use options api and compsition api in one sfc component is a best practice