DOMで動的に書き換えたりライブラリで生成されたにCSSを適用させる

::v-deepをCSS側で付与して解決。

↓こんな感じ。

.thumbnail {
            flex-grow: 1;
            object-fit: cover;
            max-height: 150px;
            max-width: 300px;
            margin: 0.2rem;
            border-radius: 4px;
      }      
    ::v-deep .thumbnail {
        flex-grow: 1;
        object-fit: cover;
        max-height: 150px;
        max-width: 300px;
        margin: 0.2rem;
        border-radius: 4px;
    }

innnerHtmlやouterHtmlで動的に要素を書き換えた場合、書き換え後の要素のクラスにCSSは当たらない。

当てるなら別途v-deepで当てる必要がある。

ライブラリ等で動的に生成される要素にも、<style scoped></style>に普通に書いた内容は効かない。

子コンポーネントにcssが当たらないのと同じ理屈。

参考にしたサイト
Vueで 動的に生成されるコンテンツにスタイルを当てる