[Vuejs]-Webcomponents is re-initializing every time while working with Vue js

<div class='parent' contentEditable='true' v-if='visible'>
     <search-bar ref='iBox'></search-bar>
</div>
<input type='checkbox' v-model='visible'>

Vue’s v-if will add/remove the whole DIV from the DOM

So <search-bar> is also added/removed on every checkbox click

If you want a state for <search-bar> you have to save it someplace outside the <search-bar> component:

• JavaScript variable
• localStorage
• .getRootnode().host
• CSS Properties I would go with this one, as they trickle into shadowDOM
• …
• …

Or change your checkbox code to not use v-if but hide the <div> with any CSS:

• display: none
• visibility: hidden
• opacity: 0
• move to off screen location
• height: 0
• …

and/or…

Managing multiple screen elements with Stylesheets

You can easily toggle styling using <style> elements:

<style id="SearchBox" onload="this.disabled=true">
 ... lots of CSS
 ... even more CSS
 ... and more CSS
</style>

The onload event makes sure the <style> is not applied on page load.

• activate all CSS styles:
  (this.shadowRoot || document).getElementById("SearchBox").disabled = false

• remove all CSS styles:
  (this.shadowRoot || document).getElementById("SearchBox").disabled = true

You do need CSS Properties for this to work in combo with shadowDOM Elements.

I prefer native over Frameworks. <style v-if='visible'/> will work.. by brutally removing/adding the stylesheet.