title: Vue.js - Composition API - Toggle Button
body: <p>I am working on a Vue.js app. I am determined to understand the Composition API. However, the syntax throws me off a bit. I feel like I'm creating closures inside of closures, which leads me to believe I'm doing it wrong. I'm trying to set whether a button is enabled/disabled when my component loads. To demonstrate, I've created this <a href="https://jsfiddle.net/kobtLy56/" rel="nofollow noreferrer">fiddle</a>, which includes the following:</p>
  <p><strong>example</strong></p>
  <pre><code>myApp.component(&quot;banner&quot;, 
    { 
      template: '&lt;button :disabled=&quot;isDisabled&quot;&gt;generate&lt;/button&gt;',
      setup(props) {
        let isDisabled = true;
        function initializeButton() {
          fetch('&lt;some-url&gt;')
            .then(res =&gt; { isDisabled = !res.ok; } )
          ;
        }
        initializeButton();
        
        return {
          isDisabled
        };
      }
    }
  );
  </code></pre>
  <p>However, this does not work. I've narrowed it down to the fact that <code>isDisabled</code> is not &quot;accessible&quot; in the <code>then</code> part of the promise. However, I'm unsure how to actually set <code>isDisabled</code> in <code>then</code>. Plus, I would <em>love</em> to put the <code>initializeButton</code> outside of the <code>setup</code> method, even that, I couldn't do though. I appreciate anyone's help who can help me out.</p>
  <p>Thank you.</p>