serverPrefetch in a v-for loop gets overwritten

[ovlb]

I’ve come across a kind of weird caching (I guess) issue.

I’ve a page which uses a headless CMS with content blocks. One of those blocks renders markdown:

<template>
  <div v-for="block in content" :key="block.id">
    <content-markdown
      v-if="block.__component === 'content.text'"
      :md="block.text"
    />
  </div>
</template>

I wanted to utilise this.renderTemplate in serverPrefetch.

  async serverPrefetch() {
    this.renderedMd = await this.renderTemplate(this.md, 'md')
  },

<template>
  <div class="md-content" v-html="renderedMd" />
</template>

This, though, leads to a problem, as suddenly all paragraphs on the page show the same content.

The shown content is the one of the last block. So somehow it overwrites everything that has been rendered before.

If I use a synchronous function directly in the template this issue does not occur.

I use @11ty/[email protected] with @11ty/[email protected]

Any idea what happens here?

[ovlb]

I poked a bit more at this and the problem only occurs if the result of renderTemplate is saved to the component data.

export default {
	data() {
		return { renderedMd: '' } 
	},

	async serverPrefetch() {
    	this.renderedMd = await this.renderTemplate(this.md, 'md')
  	},
}

if renderedMd is not present in data it works as expected.

Now I don’t know if this is a bug or a caveat?