Heatmap not render after get data from API

[carromeu]

I am try to dinamically load locations in HeatmapLayer:

<GoogleMap
    :api-key="googleMapsKey"
    :libraries="['visualization']"
    language="pt-BR"
    region="BR"
    style="width: 100%; height: 100%"
    mapTypeId="satellite"
    :center="center"
    :zoom="zoom">
    <Marker v-for="(u, index) in unities" :key="index" :options="{ title: u.name, icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png', position: u.coordinates }" @click="recenter(u)" />
    <Marker v-for="(m, index) in markers" :key="index" :options="m.options" @click="details(m)" />
    <Polygon v-for="(p, index) in polygons" :key="index" :options="p.options" @click="message(p.name, 'info')" />
    <HeatmapLayer :options="heatmap" />
  </GoogleMap>

After read all coordinates by API (using Axios), I need to render heatmap. If I use 'ref' in HeatmapLayer options, the follow error appears:

Error in watcher callback: "DataCloneError: Failed to execute 'structuredClone' on 'Window': #<Object> could not be cloned."

For the Markers and Polygons all works fine.

How I can render HeatmapLayer after map already montend with new array of coordnates and weights?

[HusamElbashir]

As a workaround you can use a shallowRef instead of a ref

[carromeu]

My bad! I fix the error simply cloning object before passing as HeatmapLayer options:

<GoogleMap
  :api-key="googleMapsKey"
  :libraries="['visualization']"
  language="pt-BR"
  region="BR"
  style="width: 100%; height: 100%"
  mapTypeId="satellite"
  :center="center"
  :zoom="zoom">
  <Marker v-for="(u, index) in unities" :key="index" :options="{ title: u.name, icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png', position: u.coordinates }" @click="recenter(u)" />
  <Marker v-for="(m, index) in markers" :key="index" :options="m.options" @click="details(m)" />
  <Polygon v-for="(p, index) in polygons" :key="index" :options="p.options" @click="message(p.name, 'info')" />
  <HeatmapLayer v-for="(h, index) in heatmap" :key="index" :options="safeClone(h.options)" />
</GoogleMap>

The method safeClone():

const safeClone = (obj) => JSON.parse(JSON.stringify(obj))