Livewire checkbox array

Hello. Trying to learn livewire. Imagine looping trough services in db (3 records) like this:

@foreach($services as $service)
<div class="bg-white p-2">
    <div class="d-flex justify-content-between">
        <div class="">
            <label for=" {{$service->id}}">{{$service->name}}</label>
            <input wire:click="service" wire:model="selectedServices({{$service->id}})"  type="checkbox" value="{{ $service }}">
        </div>
        <div class="">
            <span>kr {{ $service->price }}</span>
        </div>
    </div>
</div>
@endforeach

So what I want is when I click a checkbox ( let's say the first one) I want to display the data of this record longer down in my form.

Now I have this in my livewire App.

<?php

namespace App\Http\Livewire\Client;

use Livewire\Component;
use App\Models\Service;

class Booking extends Component
{
    public $step = 1;
    public $services;
    public $selectedServices = [];
    
   
    public function mount() 
    {
        $this->services = Service::all();
    }

    public function service() 
    {
      
       $this->selectedServices = Service::get()->where('id', $this->selectedServices);
    }

    public function increment()
    {
        $this->step++;
    }

    public function decrement()
    {
        ($this->step != 1) ? $this->step-- : false;
    }


    public function render()
    {
        return view('livewire.client.booking');
    }
}

And when I try to get the result in blade I do this:

@foreach($selectedServices as $data)
     <p> {{ $data}}</p>
@endforeach

Gives me this :

Property [$selectedServices(3)] not found on component: [client.booking]

If i just do wire:model="selectedServices" it gives me this:

Cannot bind property [selectedServices] without a validation rule present in the [$rules] array on Livewire component: [client.booking].

If i dd my service method like this

dd($this->selectedServices);


I get this: 

array:1 [▼
  0 => "{"id":3,"created_at":"2020-10-08T23:34:22.000000Z","updated_at":"2020-10-08T23:34:22.000000Z","name":"Hjulskift","price":490,"description":"Inneholder hjulskift ▶"
]

And this is actually what I want but when I loop trough

 @foreach($selectedServices as $data)
                <p> {{ $data->name}}</p>
            @endforeach

I get Trying to get property 'name' of non-object

What do I do wrong? Thanks.