How to fix Indent error in pug with vue js - vue.js

Question

We have a whole network of projects, more than 15 projects, each of them has been working for more than three years. Today, suddenly after reinstalling node modules, an error appeared everywhere:
Syntax Error: Error: C:\Users\veneg\Desktop\***\assets2\src\views\template\Socials.vue:2:1
1|
> 2| .social
-------^
3| a.social__link.rtl(v-for="(soc, index) in socials" :key="index" :href="soc.link" target="blank")
4| icon(:name="soc.name" nofill)
5|
unexpected token "indent"
There are over 3000 files in the project with this error, how can I fix this?
I tried to play with pug loader versions but nothing helped.
My versions:
"vue-loader": "~15.6",
"vue-style-loader": "~4.1",
"vue-template-compiler": "~2.6",
"webpack": "~4.29",
"webpack-bundle-analyzer": "~3.0",
"webpack-cli": "~3.2",
"webpack-dev-server": "~3.1",
"webpack-hot-middleware": "~2.24",
"webpack-merge": "~4.2"
"#vue/cli-plugin-babel": "4.2.0",
"#vue/cli-plugin-eslint": "4.2.0",
"#vue/cli-service": "4.4.1",
"#vue/eslint-config-airbnb": "5.0.2",
"pug": "2.0.4",
"pug-plain-loader": "1.0.0",

Answer 1

Instead of the pug-plain-loader try to use the #webdiscus/pug-loader.
This loader support the indent in Vue template:
<template lang='pug'>
h1 Hello Pug!
p Text
</template>
See how to use Pug loader with Vue and source of example.