fix: throw error when using defineOgImage* fns client-side

[harlan-zw]

🔗 Linked issue

#286

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

For users who don't quite understand the magic of Nuxt SSR or how OG Image tags need to work, it's quite easy to use the defineOgImage* composables in a way where no image is generated.

This appears when users try to call these functions client-side only, as either we'll be inserting the og:image payload too late for Nuxt OG Image to generate the image or inserting the tags too late for any bots to pick them up.

Previously no warning was shown and it would silently fail in these instances, this was because we were tree-shaking these composables out client-side.

This PR changes it so we avoid tree-shaking them in development, allowing us to show an error message that can be debugged.

✔️ Correct Usage

<script lang="ts" setup>
defineOgImageComponent('MyComponent', {
  foo: 'bar',
})
</script>

<script lang="ts" setup>
// async functions, awaiting first
const someAsyncData = await myAsyncDataFunction()
defineOgImageComponent('MyComponent', {
  // prefer computed getters in case you refresh the data
  foo: () => someAsyncData.value.title,
})
</script>

<script lang="ts" setup>
// async functions, awaiting after
const someAsyncData = ref()
defineOgImageComponent('MyComponent', {
 // use computed getters so it updates after the promise below resolves
  foo: () => someAsyncData.value?.title,
})
someAsyncData.value = await myAsyncDataFunction()
</script>

❌ Incorrect Usage

<script lang="ts" setup>
// onMounted is only called client-side
onMounted(() => {
  defineOgImageComponent('MyComponent', {
    foo: 'bar',
  })
})
</script>

<script lang="ts" setup>
// watch is only called client-side 
watch(foo, (val) => {
  defineOgImageComponent('MyComponent', {
    foo: val,
  })
})
</script>