title: Match a div height on toggle of another divs height with vue.js
body: <p>I have two columns: left and right. I want the left column div to match the height of right column div. The right column can be toggled between two different divs: red and blue. </p>
  
  <p>What I'm trying to do is to get the left column to match the right columns height. So if the blue div column is true the left column div will be the same height as the blue div, if the red column is true then the left column will be the same height as the red div.</p>
  
  <p><em>note: There will be more than just a red and blue div that can act as the right column.</em></p>
  
  <p>The problem I'm getting is the height of the left column div is getting set before the <code>rightColumn</code> property.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = new Vue({
      el: '#app',
      data: function () {
          return {
              leftColStyles: { },
              blueLines: ['one', 'two','three'],
              redLines: ['one', 'two','three','four','five'],
              rightColumn: 'blue',
          }
      },
      methods: {
          matchHeight() {
              var heightString = this.$refs.infoBox.scrollHeight + 'px';
              Vue.set(this.leftColStyles, 'height', heightString); 
          },
          rightColumnToggle(color){
              this.rightColumn = color;
              this.matchHeight();
          },
      },
      mounted() {
          this.matchHeight();
      }
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.columns{
    width:300px
  }
  .left-column {
    float:left; width:200px; 
    border:solid 1px black
  }
  .blue-right-column {
     float:right;
     border:solid 1px blue;
     background: blue;
   }
  .red-right-column {
     float:right;
     border:solid 1px red;
     background: red;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
      &lt;button @click="rightColumnToggle('blue')"&gt;Blue Column&lt;/button&gt;
      &lt;button @click="rightColumnToggle('red')"&gt;Red Column&lt;/button&gt;
      &lt;br&gt;
      &lt;div class="columns"&gt;
          &lt;div class="left-column" id="context" v-bind:style="leftColStyles"&gt;
              &lt;p&gt;Some text&lt;/p&gt;
          &lt;/div&gt;
          &lt;div v-if="rightColumn === 'blue'" class="blue-right-column" id="info-box" ref="infoBox"&gt; 
              
              &lt;ul&gt;
                  &lt;li v-for="line in blueLines" v-text="line"&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div v-if="rightColumn === 'red'" class="red-right-column" id="info-box" ref="infoBox"&gt; 
              
              &lt;ul&gt;
                  &lt;li v-for="line in redLines" v-text="line"&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>