Sistema de comentarios

Para los que no entiendan de donde sale la propiedad comments, este realmente es parte del objeto data() que forma ser parte de lo que obtenemos con el options asyncData(), realmente este options devuelve un objeto lo que pasa es que es confuso porque el return dice article y destructurado es { article, comments }, el código pudo estar escrito así:

asyncData({ params, $http }) {
    const { slug } = params;
    const data = $http.$get(
      `.../.netlify/functions/article?slug=${slug}`,
    );

    return data;
  },

.
Es decir que como siempre devuelve un objeto, entonces el data será destructruado en { article, comments } y podemos acceder a ellos con el this.
.
Es lo mismo que el código esté escrito de esta manera:

 async asyncData({ params, $http }) {
    const { slug } = params;
    const data = await $http.$get(
      `.../.netlify/functions/article?slug=${slug}`,
    );

    const { article, comments } = data;

    return { article, comments };
  },

.
Claro, en este caso debe ser async aunque ya pordefecto lo sea ya que internamente queremos destructurar los datos y retornar lo que realmente queremos.
.
Referencias:
data-fetching/#async-data
directory-structure/pages#asyncdata

Para la URL en Nuxt 3 dado a que vamos yendo y viniendo de servidor a cliente, he preferido usar Variables de Entorno:
https://nuxt.com/docs/guide/going-further/runtime-config

¿Por qué no utiliza el modulo $http para hacer la petición post de los comentarios, en cambio utiliza un fetch normal?

En caso de usar useFetch en lugar de fetch, es necesario ajustar lo siguiente en comment.js o comment.mjs.

Añadir el siguiente control de acceso a los headers:

 // Permite que la petición se pueda hacer con useFetch.
  // https://stackoverflow.com/a/65007227
  'Access-Control-Allow-Headers': '*' 

Y en el handler, justo antes del manejo de error con POST, para que al recibir OPTIONS del navegador, habilite el acceso en lugar de un error:

  // Esto tambien es para evitar problemas con el navegador.
    if (httpMethod === 'OPTIONS') return {statusCode: 200, headers}

Si has usado useAsyncData (Nuxt 3), habras notado que al hacer Deploy en Netlify, articles es devuelto no como un Proxy, sino como un String.

Así que recurrimos a la documentación:
https://nuxt.com/docs/api/composables/use-async-data

Y usamos la función transform para procesar la información, y parsearla en caso de ser String (Netlify) u Object (Desarrollo local).

Así es mi código en index, uso pickle para solo seleccionar articles, en caso de extender el API:

    const { data: { value: { articles }}} = await useAsyncData('articles', () => $fetch(url), {
        pick: ['articles'],
        transform(data) {
            // Para respuestas JSON no parseadas
            if (typeof data === 'string') {
                return JSON.parse(data)
            }
            return data
        }
    })