Универсальный загружаемый HTML-файл, включаяchart.js, из приложения nuxt

Мое требование — предоставить небольшое приложение Nuxt, которое генерирует простой HTML-файл, включающий некоторые обзорные разделы услуг, предоставляемых клиентам компании, в которой я работаю. Конкретный вариант использования здесь заключается в том, что приложение предоставляет HTML-файл, который можно загрузить и снова открыть в любом браузере, онлайн или оффлайн, со 100% функциональностью.

Это работает с SSR и Nuxt, однако у меня возникли проблемы с использованиемchart.js.

Текущее состояние приложения: Супербазовое приложение Nuxt, созданное с помощью nuxi, трех компонентов Vue. Один из компонентов реализует chart.js, все это приводит к следующему:

Однако когда я сохраняю полученный файл (mhtml или html), часть диаграммы не отображается. Компонент Chart, по сути, заключается в следующем:

 methods: {
      renderChart() {
        const ctx = this.$refs.chartCanvas.getContext('2d');
  
        new Chart(ctx, {
          type: 'pie',
          data: {
            labels: ['green', 'red'],
            datasets: [{
              data: [this.green, this.red],
              backgroundColor: ['green', 'red']
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false
          }
        });
      }
    }
  }

который вызывается onMounted и отображается следующим образом:

<template>
    <div>
      <canvas ref = "chartCanvas"></canvas>
    </div>
 </template>
  

Я пробовал создавать приложение разными способами (статические и серверные), но это не помогло.

Является ли это проблемой, связанной с тем, что перехватчики жизненного цикла недоступны через SSR? Или проблема конкретно в моей реализации?