Vue - Background image not re-renderred upon state change

Question

I have a Vue component with a div, where the div's background image URL is determined by a prop.

The first background image I set on the div works fine. But when consecutive changes are made to the prop (imageUrl), the image does not show up.

If I open the dev tools in Safari, manually uncheck the background-image style, and check it again, the image gets renderred correctly.

I have tried surrounding the URL with single quotes, using object style syntax, and using a key attribute to force-update the component, but none worked.

The browser is a WebKit WebView in an iOS app, on the iPad simulator.

Here is the component:

<template>
  <div class="my-image" :style="{ 'background-image': bgImage }">Some content</div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component()
export default class MyImage extends Vue {
  @Prop() imageUrl!: string;

  bgImage = 'none';

  @Watch('imageUrl')
  handleBgChange(value: string) {
    this.bgImage = `url('${value}')`;
    this.$forceUpdate();
  }
}
</script>

<style scoped lang="scss">
.my-image {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
</style>

Tried the following code too, which didn't work either:

<template>
  <div class="my-image" :style="{ 'background-image': 'url(\'' + imageUrl + '\')' }">Some content</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component()
export default class MyImage extends Vue {
  @Prop() imageUrl!: string;
}
</script>

<style scoped lang="scss">
.my-image {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
</style>