function scope creates reactive this?? How did I not know this!

[tlloydthwaites]

I was porting a vue2 method to script setup, and I accidentally left some this.obj.prop syntax. I was surprised to find out that it worked. Further examination showed that functions have this bound to a reactive object representing the whole component, like the good-old vue2 days.

Did everybody know this?? This is pretty huge to me as the ref.value syntax is the only thing that really trips me up in getting used to composition API. If I had of known this was available that would have saved a lot of work.

Is this feature mentioned in the documentation somewhere and I just missed it? It makes me very happy!

[LinusBorg]

Can you provide an example? Generally, this is not exposed in script setup.
See:

https://play.vuejs.org/#__PROD__eNp9kk9rwzAMxb+K6ktbaBrGdipp2R8K2w7b2Aa7+FISJXXr2MZ2ukDId5/s0K6M0Zul9wS/J6tjd8bMDw2yBctcboXx4NA3ZsWVqI22HjqwWEIPpdU1jMk65oqrXCvnoXYVLIM+GT+ilBq+tJXFaDwNlrJRuRdaQdtOptBxBRCmtMS51NXEb4WbQpoCFQ4aVWApFBZc9WE4zHCVpQMT0VDhsTZy45EqgGx7teq6SND3WUpV7AplGg+HpNYFyiVnpHMG6SAW4gC3uRT5npS25WyVjZLkDwAkSXQTbXDGwZQmqZmlZwhsxryjQKWo5junFW0wZuQs17UREu2rCfEdZ4shfdA2tKXv59jztsHZsZ9vMd//0985wlzQ482iQ3tAzk6a39gK/SCvP16wpfdJpAU0ktwXxHekz2gC42C7px0Q9pkv0j7FOxCq+nTr1qNyx1ABNDj76OeMbuPhQvRf3Ov5TZyjv2b9D6lF1JQ=

[tlloydthwaites]

<script setup>
import ActionSelect from '~/components/tasks/components/ActionSelect.vue';

const portal = usePortalStore();

const page = ref({})
const task = ref({});
const taskResponse = ref({});
const valid = ref(false);

const inputs = computed(() => page.value?.data?.inputs || []);

watchEffect(() => {
  if (task.value.finished) {
    taskResponse.value = task.value.last_response.response;
  }
});

const lastResponseAction = computed(() => task.value.actions.find(e => e.key == task.value.last_response?.action));

async function execute(action) {
  page.value.pending = true;
  try {
    const endpoint = `/tasks/${  ------->>>>> this.task.id <<<<<------- }/execute/${action.key}`;        
    await portal.post(endpoint, {
      task: { task_response: this.taskResponse } <<<<<------
    });
    page.value.back();
  } finally {
    page.value.pending = false;
  }

}

</script>

[tlloydthwaites]

It only works inside functions, not top-level setup.