Recibo esta advertencia en 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" >

Estoy usando el componente de esta manera

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

y este es el componente:

 <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>

Intenté cambiar:

 props:{ macro: String },

Pero no funcionó, la aplicación funciona correctamente, los datos llegan al componente pero no puedo evitar esta advertencia