// определяем компонент как объект параметров
const myComponentOptions = {
  data () { ... },
  created () { ... },
  render () { ... }
}

// предполагая HMR API Webpack.
// https://webpack.js.org/guides/hot-module-replacement/
if (module.hot) {
  const api = require('vue-hot-reload-api')
  const Vue = require('vue')

  // делаем API осведомлённым о Vue, который вы используете.
  // также проверяет совместимость.
  api.install(Vue)

  // совместимость можно проверить через api.compatible после установки
  if (!api.compatible) {
    throw new Error('vue-hot-reload-api не совместим с версией Vue, которую вы используете.')
  }

  // указываем, что этот модуль может быть перезагружен в горячем режиме
  module.hot.accept()

  if (!module.hot.data) {
    // для каждого объекта параметров компонента, который будет перезагружаться в горячем режиме,
    // вам нужно создать запись для него с уникальным идентификатором.
    // сделайте это один раз при запуске.
    api.createRecord('very-unique-id', myComponentOptions)
  } else {
    // если в компоненте изменился только его шаблон или функция рендеринга,
    // вы можете принудительно выполнить повторную визуализацию всех его активных экземпляров без
    // их уничтожения/повторного создания. Это сохраняет текущее состояние приложения нетронутым.
    api.rerender('very-unique-id', myComponentOptions)

    // --- ИЛИ ---

    // если в компоненте изменились параметры, отличные от шаблона/рендеринга,
    // он должен быть полностью перезагружен. Это уничтожит и повторно создаст все его
    // активные экземпляры (и их дочерние элементы).
    api.reload('very-unique-id', myComponentOptions)
  }
}