Can’t querySelector from [object object] : VueJS

Question

I want to use google chart and i want to querySelector some element inside and it return null

<template>
  <div class="pa-4">
    <GChart
      ref="gChart"
      :settings="{ packages: ['timeline'], state: timeRange }"
      type="Timeline"
      :data="chartData"
      :options="chartOptions"
      class="googleChart"
    />
  </div>
</template>

In script:

  mounted() {
    this.nowLine()
  },
  methods: {
    nowLine() {
      const gchartQuery = document.querySelector('.googleChart')
      console.log(gchartQuery)
      console.log(this.$refs.gChart.$el)
    },
  },

and when console log it’s return

<div state="[object object]" class="googleChart">...</div>

and if i use this code:

const gchartQuery = document.querySelector('.googleChart rect')
console.log(gchartQuery)

it return null that i can’t query more element inside it.