Blade and Javascript Interpolation

I have a blade file that uses some javascript within a form that displays an SVG when the item is chosen.

When the user loads the page I want to display the SVG for the items that are already chosen and they can the choose to add/remove.

I have this working as expected however I have had to duplicate the SVG as blade wants the id as an int and JS wants a string.

<svg x-cloak
    :class="{ 'hidden': !selectedSubjects.includes('{{ $subject->id }}') }"
    class="checkmark h-5 w-5 text-rose-200" viewBox="0 0 20 20"
    fill="currentColor" aria-hidden="true">
    <path fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
        clip-rule="evenodd" />
</svg>

<svg x-cloak
    :class="{ 'hidden': !selectedSubjects.includes({{ $subject->id }}) }"
    class="checkmark h-5 w-5 text-rose-600" viewBox="0 0 20 20"
    fill="currentColor" aria-hidden="true">
    <path fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
        clip-rule="evenodd" />
</svg>


 <script>
     function subjectForm(initialSelectedSubjects) {
         return {
             selectedSubjects: initialSelectedSubjects.map(id => parseInt(id)) || [],

             toggleSubject(id) {
                 const index = this.selectedSubjects.indexOf(id);
                 if (index === -1) {
                     this.selectedSubjects.push(id);
                 } else {
                     this.selectedSubjects.splice(index, 1);
                 }
             }
         }
     }
 </script>

This does exactly what I need it to but I don't want to have 2 SVG's.