modelair

есть такая штука - typeguard. он сообщает ts'у, что этот объект определенного типа, который указан после is. вот простенький, дальше разберешься, думаю.

function isData(data: any): data is { id: number | string } {
  return data.id !== undefined
}

у тебя data() два раза определена.
надо так:

data() {
    return {
      newNode: '',
      errorNode: '',
      ifEdited: false
    }
  },

можно. if (el && el instanceof HTMLElement)

const activeClientChange = reactive<{client: null | INewClient}>({
  client: null
})

с помощью position: sticky:

некоторый код закомментил - переделаете как вам надо

вот пожалуйста. раскладка называется phonetic.

https://github.com/sergchil/Russian-Phonetic?yscli...

лучше применить Intersection Observer API
и заменить код на этот

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 1.0
}
const svg = document.querySelector('svg')
const animation = document.getElementById('animate')
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      animation.beginElement()
      svg.style.display = 'block'
    }
  })
}, options)
observer.observe(document.querySelector('#anim1'))

<animate id="animate" .../>

посмотреть на codepen

объяснение простое: margin - для поведения блока относительно родителя и соседних блоков, padding - для поведения содержимого блока. исходите из ситуации, как для вас будет правильно.
тоесть, ваш .page__body либо будет физически отодвинут от родителя(или соседнего блока) сверху на 13px (margin-top), либо он останется на месте, но его содержимое будет на 13px ниже (padding-top)
блочная модель
ну и что-то такое можно посмотреть, https://habr.com/ru/articles/569530/

Settings -> Accessibility -> Display & Text Size -> Button Shapes - выключить.
Настройки - Универсальный доступ - дисплей и размер текста - формы кнопок - выключить.

Поставил font-weight: 300 но русские буквы не меняются, как исправить?

для этого есть реактивность.

<template>
  <child-component v-bind="globalObject"/>
</template>

<script setup>
// import { Alien, DevTools, Test, ChildComponent } from 'where?'
import { reactive } from 'vue'

const globalObject = reactive({prop1, prop2, prop3})
</script>

а вообще читайте документацию. https://vuejs.org/guide/components/props.html - для новичков там исчерпывающе

const props = withDefaults(defineProps<{
    datalist?: datalist,
    id?: strnum,
    idKey?: strnum,
    valueKey?: strnum,
    placeholder?: string,
}>(), {
    datalist: () => [] as datalist,
    idKey: 'id',
    valueKey: 'value',
    placeholder: '',
});

<FooterMenu title="О нас" :items="[{href:'#', text:'asd'}] as Link[]"/>

vue требует версию node.js 16
так как у вас устаревшая windows 7, которая не поддерживается 16-ой node, можно воспользоваться неофициальными билдами .
также, устарела и Vue CLI, вместо этого npm create vue@latest
ну а в целом - переезжайте на поддерживаемые ОС.

в данном случае спецификация HTML не позволяет вставлять тег address в p.
спецификация говорит, что тег привязан к определенному article или body для уточнения.
также она говорит, что не все что в p будет в p

если посмотреть в devtools (что я вам рекомендую делать всегда), то видно, что этот тег отрисован после p.
ну и в целом это освещено в поиске.
тут

vuetify, nuxt-ui

анимацию или переходы нужно размещать не в :hover, а сразу в главном классе
например, так.

.change_theme {
    transition: transform 0.25s;
}
.change_theme:hover {
    transform: scale(1.1);
}