Storyblok doesnt allow for Live Editor update on edit when doing a manual fetch without their functions, so this is how I handle it.

StoryblokLiveEditorWithManualFetch.vue

<script setup lang="ts">
import { StoryData } from '@storyblok/vue/dist';

const route = useRoute();

const isPreview = !!(route.query._storyblok && route.query._storyblok !== '');
const version = isPreview ? 'draft' : 'published';

const story = ref({} as StoryData);

if (isPreview) {
  // We are in preview so lets fetch it with the normal module.
  await useStoryblok(`blog/${route.params.slug}`, {
    version,
    resolve_relations: 'blog-entry.categories',
  }).then((response) => {
    if (!response) { return; }
    story.value = response.value;
  });
  // We are in preview so lets fetch it with the normal module.
  const storyblokApi = useStoryblokApi();
  await storyblokApi.get(`cdn/stories/blog/${route.params.slug}`, {
    version,
    resolve_relations: 'blog-entry.categories',
  }).then((response) => {
    if (!response) { return; }
    story.value = response.data.story;
  });

  onMounted(() => {
    const { StoryblokBridge } = window;
    const storyblokInstance = new StoryblokBridge();
    storyblokInstance.on(['published', 'change', 'input'], (event) => {
      story.value = event.story;
    });
  });
} else {
  // Custom fetch for full static support.
  await useStoryblokFetch(`blog/${route.params.slug}`, {
    version,
    resolve_relations: 'blog-entry.categories',
  }).then((response) => {
    if (!response) { return; }
    story.value = response.story;
  });
}
</script>

<template>
  <div class="page blog-entry-page">
    <component
      :is="$resolveStoryBlokComponent(story)"
      v-if="story.content"
      :blok="story.content"
      :raw="story"
    />
  </div>
</template>