Using Vue components for Theme Sections and updating via the Theme Editor fails.

[sebszocinski]

We've created a Vue component for a section and passed through the section / block data via props which works great, but have found an issue where when using the Theme Editor and updating section content, it fails to live update the theme as that component is now in Vue...

I'm not sure if there is a way to resolve this, but perhaps there is?

Does anyone know if Shopify fires off any JS events we can hook onto and update Vue? or force a hard refresh of the iFrame?

[sergejcodes]

Without additional info, I assume your Vue component isn't being compiled and rendered by Vue after you insert a section in the theme editor.

Shopify does fire some events based on user selection, see here

For some reason, I couldn't get the root Vue instance to update. As a workaround append this to your main.js file to force-create a new Vue component in the theme editor, when selecting/inserting a section:

// eslint-disable-next-line
if (Shopify && Shopify.designMode) {
  document.addEventListener('shopify:section:load', (event) => {
    new Vue({
      el: event.target,
      store
    })
  })
}

[sebszocinski]

Ah yes thats exactly what I was looking for. Thanks that works well!

[sebszocinski]

I also tried $forceUpdate and that wouldn't work either... not sure why but creating a new Vue instance worked...