I am trying to implement a component named CamViewMatrix in Vue.js. My requirement is to get the width of CamViewMatrix's parent inside itself (say in created() method of CamViewMatrix) so that I can make some calculations with it (there are some time-based charts that need to be made responsive which is not possible unless an initial value for width is in hand).

<div>

  <div class='controller-wrapper'>

    ...

  </div>

  <CamViewMatrix v-bind:cameras='cams' />

</div>

I tried assigning an id to its parent and passed the same as a prop to CamViewMatrix, and attempts to getElementById, but it's not able to. Code given below:

<div id='parentid'>

  <div class='controller-wrapper'>

    ...

  </div>

  <CamViewMatrix v-bind:cameras='cams' parentId='parentid' />

</div>

And inside CamViewMatrix component:

<script>

export default {

  name: 'CamViewMatrix',

  props: {

    parentId: {

      type: String,

      required: true,

    },

    ...

  },

  created() {

    console.log(document.getElementById(this.parentId)); // 👈️ logs null

    ...

  }

}

With the above code, I am not able to get the parent element (it's logging null).

Have also tried using ref and $parent, but was not able to. Kindly help me with this.

Thanks in advance.