<LeagueTopScorers /> will undergo re-rendering when there is a change in the selectedLeague, but it will not be remounted.
It will only mount when the selectedLeague changes from a falsy value to a truthy one (as that's when the value of the v-if changes).
Your question has a few issues:
- You are inquiring about a technical aspect, X, which you believe will address a business requirement, Y. This is known as an XY problem. Why not explain what exactly you want to achieve with Y? What output alteration do you seek based on what input modification?
- The provided code snippet is insufficient to construct a functional example. Without clarity on what
v-select is, or how <LeagueTopScorers /> operates, and the structure of the :is prop on <LeagueTopScorers />.
Based on the code excerpt you shared, here are my assumptions:
v-select appears to be either vue-select or Vuetify select component- You seem to expect
:is to function similarly on <LeagueTopScorers /> as it does on <component />. Note: this might not be the case unless specifically implemented.
- Finally, it seems like you aim to execute certain code within an initialization lifecycle hook of
<LeagueTopScorers /> when replacing an object stored in selectedLeague with another object.
If my understanding is accurate, the most straightforward method to attain this behavior would be creating a computed property 2:
const leagueId = computed(() => selectedLeague?.id.toString() || '')
... and integrating it into v-if, :key, and :selectedLeague:
<LeagueTopScorers
v-if="leagueId"
:selectedLeague="leagueId"
:key="leagueId" />
(excluding the <div v-if> wrapper).
The above approach will spawn a new instance of <LeagueTopScorers /> whenever leagueId changes, rendering only when leagueId is not falsy. This likely aligns with your intended technical objective 3.
Notes:
1 - for verification, utilize
onUpdated(() => console.log('updated...'))
2 - employ
selectedLeague.value?.id.toString()
if
selectedLeague is a
ref
3 - while I am confident the actual business requisites can be satisfied without generating a fresh instance of
<LeagueTopScorers /> every time
leagueId shifts, more details and context are necessary for further assistance