Set Height of a Div in Vue Js

How to get height of div with Vue

Whenever you're getting information from the DOM like this, it's advantageous to use computed properties:

  computed: {
    height () {
      return this.$refs.infoBox.clientHeight
    }
  }

This way Vue polls for changes to this variable and it'll be updated as the DOM updates. The problem with setting it once in mounted is that this obviously doesn't happen. Other then that you're grabbing it the right way. If it's a hardcoded height set in CSS you could also grab it out of the style object, but that's not a great idea.

How to keep track of the height of a component in Vuejs?

I am not sure why you are trying to capture the height, there might be better approaches (e.g. CSS-only)... But if you use this:

mounted(){
this.$nextTick().then(()=> {
    this.entries.forEach((entry, idx) => {
        this.oneCol.push({ idx: idx, component: KeepTrackOfHeight, height: this.$refs.componentName.$el.clientHeight})
        })
    }
}

your DOM has finished rendering and $refs are available

Vue.nextTick

Match a div height on toggle of another divs height with vue.js

You do not really need a Vue.js code to do this. Use CSS Flexbox to do this:

<style>
    .columns {
        width:300px;

        /* USE CSS FLEXBOX */
        display: flex;

        /* This stretches the flexbox children to have max-height child */
        align-items: stretch;
    }

    .left-column {
        width:200px; 
        border:solid 1px black;
    }

    .blue-right-column {
        border:solid 1px blue;
        background: blue;
    }

    .red-right-column {
        border:solid 1px red;
        background: red;
    }
</style>

Get element height with Vuejs

The way you are doing it is fine. But there is another vue specific way via a ref attribute.

 mounted () {
   this.matchHeight()
 },
 matchHeight () {
   let height = this.$refs.infoBox.clientHeight;
 }

    <div class="columns">
        <div class="left-column" id="context">
            <p>Some text</p>
        </div>
        <div class="right-column" id="info-box" ref="infoBox"></>
            <img />
            <ul>
                some list
            </ul>
        </div>
    </div>

In this case, since you are just getting the value it really doesn't matter whether you use your original getElementById approach or the vue specific ref approach. However if you were setting the value on the element then it's much better to use the ref approach so that vue understands that the value has changed and won't possibly overwrite the value with the original value if it needs to update that node in the DOM.

You can learn more here: https://v2.vuejs.org/v2/api/#vm-refs

Update

A few people had left comments that the above solution didn't work for them. That solution provided the concepts but not full working code as example, so I have augmented my answer with the code below which demonstrates the concepts.

var app = new Vue({
    el: '#app',
    data: function () {
        return {
            leftColStyles: { },
            lines: ['one', 'two','three']
        }
    },
    methods: {
        matchHeight() {
            var heightString = this.$refs.infoBox.clientHeight + 'px';
            Vue.set(this.leftColStyles, 'height', heightString); 
        }
    },
    mounted() {
        this.matchHeight();
    }

});

.columns{width:300px}
.left-column {float:left; width:200px; border:solid 1px black}
.right-column {float:right; border:solid 1px blue; }

<div id="app">
    <div class="columns">
        <div class="left-column" id="context" v-bind:style="leftColStyles">
            <p>Some text</p>
        </div>
        <div class="right-column" id="info-box" ref="infoBox"> 
            <img />
            <ul>
                <li v-for="line in lines" v-text="line"></li>
            </ul>
        </div>
    </div>

</div>

 <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
 

const app = new Vue({
   el: '#app',
   data() {
    return {
      sWidth: null
    };
  },
  created() {
    window.addEventListener("resize", this.screenWidth);
  },
  mounted () {
    this.screenWidth()
  },
  destroyed() {
    window.removeEventListener("resize", this.screenWidth);
  },
  methods: {
    screenWidth() {
      this.sWidth = this.$refs.container?.offsetWidth;
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" ref="container">
    screen {{ sWidth }}
</div>