无法在 Vue3 中设置 Ref 数据属性，项目未定义

Question

Essentially I'm using Vue3 and Nuxt3. I'm trying to grab the:id param from the URL and if it matches an ID in a JSON it updates a ref data point called 'exists'. My console log shows all that is working. The issue is this.exists is showing as undefined. I attempted the const self = this; trick, to no avail.

Full warning:

500: Cannot set properties of undefined (setting 'exists')

<template>
    <div class="single-hunt">
        <div class="container">
            Single Hunt 
        </div>
    </div>
    
</template>

<script>

import hunt from '../../assets/api/hunts.json'
import { onMounted } from 'vue';
import { useRoute } from 'vue-router'

export default {
    
    setup() { 
        const route = useRoute();
        const id = route.params.id;
        const exists = ref(false);

        onMounted(() => {
            for (let i = 0; i < hunt.length; i++) {
                if (hunt[i].address == id) { 
                    console.log('exists')
                    this.exists = true;
                    break;
                }
            }
        })

        return {
            hunt,
            exists
        }
    }
}
</script>

<styles src="../../assets/css/singlehunt.css"/>

Answer 1

You should import ref from vue: import { ref } from 'vue';

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref