title: Reset Vue Value on Browser Back
body: <p><strong>Background</strong></p>
  <p>We have a checkout page that redirects to Stripe once an order object has been created. As this is via an API request it takes a little bit of time. Therefore we need to block the &quot;checkout&quot; button once it's been clicked so it can't be clicked multiple times.</p>
  <p>We do this currently by showing a loading icon when the button is clicked, to achieve that we toggle a variable value.</p>
  <p>The app is in Laravel with Jetstream (w/ Inertia) and we're restricted in terms of resetting the values ourselves on form success due to Inertia.</p>
  <p><strong>Problem</strong></p>
  <p>This works fine unless the user then clicks their browser back button, after redirecting to Stripe. If they do that the loading icon stays visible and it appears Vue isn't resetting the state of the variable to false.</p>
  <p><strong>Example Code</strong></p>
  <pre><code>&lt;template&gt;
     &lt;div&gt;
        &lt;div v-if=&quot;loadingCheckout&quot;&gt;Loading&lt;/div&gt;
        &lt;button v-if=&quot;!loadingCheckout&quot; @click=&quot;startPurchase&quot;&gt;Checkout&lt;/button&gt;
     &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
     import { defineComponent, ref } from 'vue'
     export default defineComponent({
        data() {
          return {
              loadingCheckout: false,
          };
         },
         methods: {
          startPurchase() {
              this.loadingCheckout = true;
              // Create checkout logic
          }
         }
     })
  &lt;/script&gt;
  </code></pre>
  <p><strong>Attempted Solutions</strong></p>
  <p>We've tried to use event resets such as <code>setUp</code>, <code>beforeMount</code>, <code>mounted</code> without any luck. Additionally have tried using a <code>ref</code> inside of setup instead of the data approach but the same issue applies.</p>
  <p>We've also tried to use a method to generate the data property but same issue. Have also tried to use the Inertia callbacks on the form such as <code>onSuccess</code> however these don't get triggered, assuming this is due to JetStream interfering.</p>
  <p>Any ideas would be helpful, the ideal is that we can have this state only applied during each render of the page and never kept in memory really. I think the issue comes from Inertia/Vue storing the state in the browser history.</p>