Мне кажется более правильно будет переложить работу с webp на сторону веб-сервера. Это умеет делать модуль Pagespeed для Nginx, а также легко реализуется в виде Middleware. Веб-сервер проверяет по заголовку accept, поддерживает ли браузер формат webp, генерит картинку и складывает в кэш. Если не поддерживается и при первом обращении возвращает оригинал. Через атрибут srcset всё-таки лучше решать задачу с картинками под разные экраны.
Это уже костыли получатся, если не задумано разработчиком Vue и не будет поддерживаться в будущем :)
И тут есть ещё один гвоздь, собственно, для чего и затеивался серверный рендеринг — исполнение одних и тех-же компонентов как на клиенте, так и на сервере. Это не будет иметь нужного эффекта, если придётся поддерживать 2 разных интерфейса — для клиента и для сервера. Решением возможно могла бы послужить какая-нибудь универсальная ORM, у которой всё это под капотом, но это уже совсем другая история.
Ну, изначально суть идеи была в том, чтоб на сервере обращаться напрямую к модели через ORM, а не выполнять http-запросы для получения данных. По этому подумал что метод, выполняемый только на сервере должен выпилиться при сборке из клиенсткой части.
И тут есть ещё один гвоздь, собственно, для чего и затеивался серверный рендеринг — исполнение одних и тех-же компонентов как на клиенте, так и на сервере. Это не будет иметь нужного эффекта, если придётся поддерживать 2 разных интерфейса — для клиента и для сервера. Решением возможно могла бы послужить какая-нибудь универсальная ORM, у которой всё это под капотом, но это уже совсем другая история.
Нужно ещё обновить vue-server-renderer и vue-template-compiler до соответствующей версии.