Rendering bullet points results in [object Object]

[huzailhassan]

I am trying to render the bulletpoints, however, the result is the following screenshot, where the bullet point list I want to result becomes [object Object]:

The following is my code:

<script>
import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
import { BLOCKS } from '@contentful/rich-text-types'

const contentful = require('contentful')
const config = {
  space: '341l220skrs9',
  accessToken: 'a2kEigyr-81a4J8sPyN1-UNU9R9eO3cPQDdKb0GkRWc',
}
const client = contentful.createClient(config)
export default {
  async asyncData({ params }) {
    const projects = await client.getEntries({
      'fields.slug': params.post,
      content_type: 'blogPost',
    })
    const newProjects = projects.items[0].fields
    console.log('DDD', projects)
    return {
      newProjectss: newProjects,
    }
  },
  data() {
    return {
      options: {
        renderNode: {
          [BLOCKS.EMBEDDED_ASSET]: ({
            data: {
              target: { fields },
            },
          }) =>
            `<img src="${fields.file.url}" height="${fields.file.details.image.height}" width="${fields.file.details.image.width}" alt="${fields.description}"/>`,
          [BLOCKS.UL_LIST]: (node, children) => <ul>{children}</ul>,
          [BLOCKS.OL_LIST]: (node, children) => <ol>{children}</ol>,
          [BLOCKS.LIST_ITEM]: (node, children) => <li>{children}</li>,
        },
      },
    }
  },
  methods: {
    documentToHtmlString(text) {
      return documentToHtmlString(text.body, this.options)
    },
  },
}
</script>

And this is what I am trying to render: