Vue3 Add html to existing project - vuejs3

Question

I’ve built my first project and have run the build process. I have my index.html file and it works if opened directly.
I’ve copied the code into an existing html page and the initial page load is fine. However, when props get updated, binding (v-if statements) no longer works.
Any help would be great
Edit with code example
<script>
import { ref } from "vue";
import Determining from './Determining.vue'
import Ready from './Ready.vue'
export default {
components: {
'Determining': Determining,
'Ready': Ready,
},
setup() {
let checkout = ref({
state: 'determining',
});
return {
checkout,
};
},
created() {
this.checkout.state = 'ready';
console.log("I am getting here");
}
}
</script>
<template>
<Determining v-if="checkout.state == 'determining'" />
<Ready v-if="checkout.state == 'ready'" />
</template>
The determining state is shown when the page first loads. The console log is firing in setup, but Ready component is not showing
Progress
I've narrowed it down to other javascript running on the page.
Any javascript, even just
<script>console.log("hello");</script>
Is enough to break it.
Other than adding additional javascript to Vue, is there anyway around it?

Answer 1

if I'm not wrong, you can't access composition api or setup() variables in options api (such as created, mounted, data, methods etc). You can use beforeMount as #Thomas commented or onMounted by importing it from vue, for the example:
<script>
import { ref, beforeCreate } from "vue";
import Determining from './Determining.vue'
import Ready from './Ready.vue'
export default {
components: {
'Determining': Determining,
'Ready': Ready,
},
setup() {
beforeCreate(()=> {
checkout.state.value = 'ready';
console.log("I am getting here");
})
let checkout = ref({
state: 'determining',
});
return {
checkout,
};
}
}
</script>
<template>
<Determining v-if="checkout.state == 'determining'" />
<Ready v-if="checkout.state == 'ready'" />
</template>
if you want it more simple, you can use script sugar setup, this way you don't need to return in stup(). It can make your code simpler but if you want to define props, the approach is different
<script setup>
import { ref, beforeCreate } from "vue";
import Determining from './Determining.vue'
import Ready from './Ready.vue'
beforeCreate(()=> {
checkout.state.value = 'ready';
console.log("I am getting here");
})
let checkout = ref({
state: 'determining',
});
</script>
<template>
<Determining v-if="checkout.state == 'determining'" />
<Ready v-if="checkout.state == 'ready'" />
</template>