Как добавить эффект наведения, чтобы увеличить размер текста в теге Vue?

У меня нет знаний Vue.js, поэтому не уверен, что это полезно:

Если вы можете изменить разметку, вы можете обернуть {{folder.DisplayText}} в элемент <p> или <span>, а затем использовать селектор CSS element + element. Что-то вроде этого:

<style scoped>
.material-icons:hover,
.material-icons:hover + p {
    transform: scale(1.2);
}
</style>

<template>
    <div @click = "folderFinder(folder)" v-for = "folder in DisplayedFolders">
         <i class = "material-icons">{{folder.DisplayIcon}}</i>
         <p>{{folder.DisplayText}}</p>
    </div>
</template>

Если вы не можете изменить разметку, примените класс ко всему контейнеру <div> и используйте :hover в этом контейнере.

Вы можете применить стиль преобразования в классе-оболочке, который содержит как icon, так и text.

Демо:

.transform-me {
  margin-left: 100px;
}

.transform-me:hover {
  transform: scale(1.2);
}

<link href = "https://fonts.googleapis.com/icon?family=Material+Icons"
      rel = "stylesheet">

<div class = "transform-me">
<i class = "material-icons">folder</i>Hello World!
</div>