Cannot read property error on custom block panel preview

Hi all,

I have a question about custom blocks with it’s own preview for the panel. My setup uses a build process just like the pluginkit to make use of single file components. As a test I’ve added the below custom block and registered it in a plugin. Now inside the builder field I can add the custom block and add it’s data successfully. The preview field also works as expected.

However when I have the developer process running and I save the component file I’m working on, the panel throws this warning:

Cannot read property 'cover' of undefined

Once I refresh the page the custom block is rendered correctly again. I’m sure I’m missing something simple here…

Blueprint:

name: Test
icon: image
fields:
  cover:
    type: files
    max: 1
    multiple: false
  text:
    type: text

test.vue

<template>
  <k-block-figure>
    <template v-if="src">
      <div class="k-block-type-image-overlay">
        <input
          type="text"
          :placeholder="placeholder"
          :value="content.text"
          @input="update({ text: $event.target.value })"
        />
      </div>
    </template>

    <template v-if="src">
      <img
        :src="src"
        class="k-block-type-image-auto"
      >
    </template>
  </k-block-figure>
</template>
<script>

export default {
  computed: {
    src() {
      if (this.content.cover[0] && this.content.cover[0].url) {
        return this.content.cover[0].url;
      }
      return false;
    },
    placeholder() {
      return "Make this a Heading...";
    }
  }
}
</script>

Thanks,
Flo