As said in the comments, a mask is not the preferable way to change the color of an icon. A filter can do a much better job. This is how I would do it. Excuse me if I abandon the Vue syntax in fvor of showing the result, but I am sure you can port this back easily.
The filter first floods the filter region with the intended color, then clips its aparent area back to the outline of the icon with the Porter-Duff atop operator.
.flex-container {
justify-content: space-around;
display: flex;
padding: 20px;
}
.iconTile {
margin: 0;
padding: 10px;
width: 100px;
height: 100px;
}<div class="flex-container">
<div class="iconTile">
<svg viewBox="0 0 36 36">
<filter
id="checkmark-filter" >
<feFlood
flood-color="purple"
result="color"
/>
<feComposite
operator="atop"
in2="SourceGraphic"
in="color"
/>
</filter>
<image
href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Icons8_flat_checkmark.svg/768px-Icons8_flat_checkmark.svg.png"
x="0"
y="0"
width="100%"
height="100%"
filter="url(#checkmark-filter)"
/>
</svg>
</div>
<div class="iconTile">
<svg viewBox="0 0 36 36">
<filter
id="pencil-filter" >
<feFlood
flood-color="green"
result="color"
/>
<feComposite
operator="atop"
in2="SourceGraphic"
in="color"
/>
</filter>
<image
href="https://upload.wikimedia.org/wikipedia/commons/5/57/Red_pencil.svg"
x="0"
y="0"
width="100%"
height="100%"
filter="url(#pencil-filter)"
/>
</svg>
</div>
</div>
Works like a charm, thank you very much! codepen.io/Kesselfest/pen/xxEVvNj