Shopify theme editor + Vue3.x: how to pass new section setting value to Vue app?

I am trying to integrate Vue3.x with Shopify theme editor. Now I can make the Vue app work in theme editor. However, when I try to change the Add to bundle button color in section, the button color cannot be updated immediately.

So I try to listen to the shopify:section:select event. But the function remountVueApp() is always showing the old {{ section.settings.button_color }} value. So I don't know how to get pass the updated value from section.settings to Vue app. How can it be done?

When I press Save button, the section setting can be saved and new button color is shown.

The screenshot is showing the debug message after I change the button color in theme editor

<!-- This will only render in the theme editor -->
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
<script>
  function remountVueApp() {
    console.log('listen to shopify theme editor re-render. Render app to respond to DOM update');
    vueApp = createMyApp();
    console.log('button_color 2 = {{ section.settings.button_color }}');
    buttonColor = '{{ section.settings.button_color }}';
             
    vueApp.component('product-card', productCard) 
    vm = vueApp.mount('#byobApp') 
  }

  const emitter = window.mitt();
  emitter.on('shopify:section:select', remountVueApp);

  const themeEventHandler = (event) => {
    console.log(event.detail.load)
    if (event.detail.load) {
      // emit a generic version
      console.log('button_color 1 = {{ section.settings.button_color }}');
      emitter.emit(`${event.type}`, event);
    }
  };

  // these are custom events emitted by the Shopify section editor
  // we are hooking them up to our Vue event dispatcher
  document.addEventListener('shopify:section:select', themeEventHandler);  
</script>