title: How can I persist newly saved values across components? Pulling original values from DOM
body: <p>I have 3 different components with buttons to navigate across them. All of the default form values are pulled from the DOM and set into the data beforeMount. The reason I'm doing it this way is that the values are coming from my Rails database.</p>
  
  <p>When I edit a form and save it successfully (via ajax), everything is good but once I switch components using the navigation, those values in the inputs are reset back to the original/old values since the beforeMount is running again and the DOM was not updated with the new value (due to no refresh yet).</p>
  
  <p>I tried changing the original values in the DOM with jQuery upon every update but that didn't work. It would work once but further updates didn't change.</p>
  
  <p>Here is how I'm setting the data inside of the beforeMount:</p>
  
  <pre><code>const element = document.getElementById('setting');
  const setting = JSON.parse(element.dataset.setting)
  this.discountType = setting.discount_type;
  </code></pre>
  
  <p>Then, upon every ajax request I tried to edit those original values in the DOM which didn't work:</p>
  
  <pre><code>outerThis = this;
  Rails.ajax({
          url: '/update-settings',
          type: 'POST',
          data: data,
          dataType: 'json',
          success: (data) =&gt; {
              ShopifyApp.flashNotice('Successfully updated')
              var settings = $('#setting').data('setting')
              settings.discount_type = outerThis.discountType
          },
          error: (err) =&gt; {
              ShopifyApp.flashError('There was an error')
          }
      })
  </code></pre>
  
  <p>What's the recommended way to go about this issue? </p>