I'm getting this warning in vue:

    [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
      at <GoodMacroElement macro= Object class="row mt-3" > 

I'm using the component this way

     <GoodMacroElement v-for="goodMacro in goodMacroDataObject" :macro="goodMacro" class="row mt-3"></GoodMacroElement>

and this is the Component:

<template>
    <div class="row">
      <div :class="style1">
        <img :src="img_src" alt="">
        {{ macro.name }}
      </div>
      <div class="col-md-6 pt-3 percentage-div">
        <span class="color-{{ level }}">{{ macro.value }}%</span>
      </div>
    </div>
    <div class="row">
        <div class="col-md-12 categories mb-3">
          <div class="row" v-for="category in macro.categories">
            <div class="col-md-6">
              {{ category.description }}
            </div>
            <div class="col-md-5" style="text-align:right">
              <strong :class="`color-${category.level}`">{{ category.name }}</strong>
            </div>
            <div class="col-md-1 row">
              <div :class="`level-${category.level} level-marker`" ></div>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "GoodMacroElement",
  props:{
    macro: Object
  },
  data(){
    return {
      macroData:this.macro,
      style1: `col-md-6 first interactive-table-cell col-md-offset-3 col-md-6 pt-3 background-level-${this.macro.level}`,
      img_src: `/img/results/${this.macro.product_prefix}/macro/${this.macro.label}-${this.macro.level}.png`
    }
  }
}
</script>

<style scoped>

</style>

I tried changing :

props:{
        macro: String
      },

But didn't work , The app is working correctly , the data arrives to the component but I can't avoid this warning