title: How to initialize value based on ajax response?
body: <p>I need to create a checkbox that will be checked/unchecked depending on the value of a parameter coming from the database.</p>
  
  <p>I'm not able to load that value when I'm rendering the page, so the idea is: render the page, "tell" the checkbox to "ask" the server what is the current value of the parameter and then check/uncheck the checkbox depending on the response. Then, if the user checks/unchecks the checkbox, make a new Ajax request to update the value in the database.</p>
  
  <p>I wrote some code (I'm new in Vuejs, so for sure I'm doing something wrong):</p>
  
  <pre><code>var vm = new Vue({
      el: '#root',
      computed: {
          checked() {
              return this.initialize()
          },
          value() {
              return this.checked
          }
      },
      watch: {
          checked() {
              alert('watcher')
              this.update();
          }
      },
      methods: {
          initialize(){
              // Just pretending an initial value
              var randomBoolean = Math.random() &gt;= 0.5;
              alert('Ajax request here to initialize it as ' + (randomBoolean ? 'checked' : 'unchecked'));
              return randomBoolean;
          },
          update(){
              alert('ajax request here to set it to ' + this.value)
          }
      }
  });
  </code></pre>
  
  <p>You can check and run the code here: <a href="https://jsfiddle.net/hyn9Lcv2/" rel="nofollow noreferrer">https://jsfiddle.net/hyn9Lcv2/</a></p>
  
  <p>Basically it works to initialize the checkbox, but then it fails to update. If you check the console, there is this error:</p>
  
  <pre><code>[Vue warn]: Computed property "checked" was assigned to but it has no setter.
  </code></pre>