[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
Method 1: wrap your component by <no-ssr></no-ssr>
<template>
<div >
<Navbar />
<div class="container">
<no-ssr>
<div v-if="chartOptions.series[0].data.length">
<highchart :options="chartOptions" />
</div>
</no-ssr>
</div>
</div>
</template>
Method 2: wrap your component by <client-only></client-only>
For NuxtJS version > v2.9.0
<template>
<div >
<Navbar />
<div class="container">
<client-only>
<div v-if="chartOptions.series[0].data.length">
<highchart :options="chartOptions" />
</div>
</client-only>
</div>
</div>
</template>
