In my current project, I'm working on a basic Vue-3 app and encountering an issue that's puzzling me. The view in question is rendered through the router and consists of simple state components - an object reference for storing text field values and a boolean reference for toggling a modal, along with a single state object from a pinia store.
Upon initial loading of the view, everything works smoothly; I can edit text fields bound to the object reference without any issues. However, when I try to open the modal by clicking a button for the first time, two strange things happen: the text fields are cleared, and the modal fails to open. After this initial hiccup, the modal operates as expected, opening and closing without affecting the view's state.
I've tried adding watchers to monitor changes in internal state references, but these watchers do not trigger when the text fields are unexpectedly cleared after the first button click. I'm struggling to pinpoint what might be causing this unusual reactivity.
EDIT: Upon further investigation, I noticed that the first time I click the button to show the modal, the onMounted() method fires on the view itself. Could this behavior be related to the modal being teleported into the body tag, potentially causing the entire view to remount? /EDIT
Here is the code snippet of the view (TemplateEditorView.vue) for context:
<script setup>
import TemplateSelectorComponent from '../components/TemplateSelectorComponent.vue'
import useTemplate from '../composables/useTemplate'
import { computed, ref, watch } from 'vue'
import AddSectionModal from '../components/AddSectionModal.vue'
import { useTemplateStore } from '../stores/template'
import { storeToRefs } from 'pinia'
// ... View script continues ...
</script>
// ... View template markup ...
<style scoped>
// Some css
</style>
The modal component (AddSectionModal.vue) structure is outlined as follows:
<script setup>
// ... Modal script continues ...
</script>
// ... Modal template markup ...
The generic modal implementation (GenericModal.vue) is defined as:
<template>
<Transition name="modal">
<div v-if="show" class="modal-mask">
// Modal content...
</div>
</Transition>
</template>
<style>
// Some CSS
</style>
Given this scenario, what strategies could be employed to identify the root cause of the unforeseen reactivity issue?