[Vuejs]-Vue.js–CSS doesn't work on v-html element

I don’t really know how your code looks like but, you can do it like this in your data

  data() {
    return {
      richText:
        '<style scoped>.section-title{color:#ffecd1;font-size:64px;font-weight:700;margin-bottom:32px}.img-header{width:480px;height:auto;object-fit:cover;border-radius:16px;padding-right:16px}.section-motto{color:#ffecd1;font-size:28px;line-height:1.7em;margin-bottom:64px}.text-wrapper{background-color:#932f2d;border-radius:16px;padding:24px}.section-description{color:#ffecd1;font-size:24px;line-height:1.7em}</style><div class="section-title-wrapper"><h2 class="section-title">Ormawa</h2><p class="section-motto">Motto UKM Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid, maiores qui. Debitis vel nulla nihil laudantium veniam undesapiente quos cum.</p></div><div class="row d-flex align-items-center"><div class="col-4 col-md-4 col-12"><img class="img-header" src="https://via.placeholder.com/400x200" alt="ukm-cover" /></div><div class="col-lg-8 col-md-8 col-12 text-left"><div class="text-wrapper"><p class="section-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit.Eveniet molestiae iste quod blanditiis laborum fugiat odit earumvoluptatem impedit, neque, et accusantium possimus animidoloribus modi in totam eligendi explicabo.</p></div></div></div>'
    };
  }

after that you can just insert it like this:

<template>
 <div>
  <div v-html="richText"></div>
 </div>
</template>

If you confused, for the detail I just add a <style scoped></style> in the rich text. in normal condition my style will look like this:

<style scoped>
  .section-title-wrapper {
    text-align: left;
  }

  .section-title {
    color: #ffecd1;
    font-size: 64px;
    font-weight: bold;
    margin-bottom: 32px;
  }

  .img-header {
    width: 480px;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    padding-right: 16px;
  }

  .section-motto {
    color: #ffecd1;
    font-size: 28px;
    line-height: 1.7em;
    margin-bottom: 64px;
  }

  .text-wrapper {
    background-color: rgb(147, 47, 45);
    border-radius: 16px;
    padding: 24px;
  }

  .section-description {
    color: #ffecd1;
    font-size: 24px;
    line-height: 1.7em;
  }
</style>

and my rich text will looks like this:

  <div class="section-title-wrapper">
    <h2 class="section-title">Ormawa</h2>
    <p class="section-motto">
      Motto UKM Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      Aliquid, maiores qui. Debitis vel nulla nihil laudantium veniam unde
      sapiente quos cum.
    </p>
  </div>

  <div class="row d-flex align-items-center">
    <div class="col-4 col-md-4 col-12">
      <img
           class="img-header"
           src="https://via.placeholder.com/400x200"
           alt="ukm-cover"
           />
    </div>
    <div class="col-lg-8 col-md-8 col-12 text-left">
      <div class="text-wrapper">
        <p class="section-description">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit.
          Eveniet molestiae iste quod blanditiis laborum fugiat odit earum
          voluptatem impedit, neque, et accusantium possimus animi
          doloribus modi in totam eligendi explicabo.
        </p>
      </div>
    </div>
  </div>

And yeah, if you input image from local asset it doesn’t work as for now i still doesn’t find the reason yet, but it is best to use external link.

You can write ‘internal css’ like this

<style scoped>
    .parent /deep/ .child{}
</style>

or

<style scoped>
    .description /deep/ {color:#000}
</style>

You are assigning color to a local scoped variable txetHrefSoloLearn.
you can bind Style and assign color to it like

<div class="description" :style="txetHrefColor" v-html="education.description"></div>

data:{
   textHrefColor:null 
}

methods: {
changeVhtmlStyle:function() {
  this.textHrefColor='#000000';
    }
},

mounted: function() {
this.changeVhtmlStyle()
}