title: Using conditional for computed Vue properties
body: <p>I'm using Vue in a site and I have a working button which changes state (If button says pause and is clicked it changes to say resume, as well as changing the colors)</p>
  
  <p>The button functionality here works perfectly on the page but I'm having an issue making it line up with a value on the same page. I have another function that has an object called <code>details</code> and that has a value called <code>status</code> which can be "H" or "P"</p>
  
  <p>All I need to do now is resolve this so that on page load, if the status is "H" the button says 'Resume' and if it's "P" the button says Pause (essentially, if "H" then !this.isOpen, and if "P" then this.isOpen)</p>
  
  <p>How can I change this for page load so that if status is H this.isOpen is false, and if it's P this.isOpen is true? I can't do an if/conditional in the data return but maybe I could use computed properties somehow?</p>
  
  <pre><code>&lt;button class="btn btn-block" :style ="{ color: pauseButton.textColor, backgroundColor:pauseButton.background, border:none, borderRadius: .15 }" v-on:click="pauseTask" type="button" role="button" id="" aria-expanded="false"&gt;
    {{ pauseButton.text }}
  &lt;/button&gt;
  
  data() {
      return {
          details: [],
          pauseButton: {
              text:'Pause',
              textColor: '#6c757d',
              background: '#BDE5F8'
          },
          isOpen: true,
      }
  },
  pauseTask: function() {
        this.isOpen = !this.isOpen;
  
        //this is the new line that doesn't work the way I need
        if(this.details[0].status === 'H'){
          !this.isOpen;
        }
  
        this.pauseButton.text = this.isOpen ? 'Pause' : 'Resume';
        this.pauseButton.background = this.isOpen ? '#BDE5F8' : '#FEEFB3';
        this.pauseButton.textColor = this.isOpen ? '#6c757d' : '#ff6e6e ';
      },
  </code></pre>