Can't figure out sync().

Hey guys,

I'm fairly new to Laravel and Blade, startet a few weeks ago. Currently I'm working on a CMS for a friend/customer.

What I plan on doing: Create Teams > Create Members >Edit Team and attach members.

I've created three tables for this: teams, members and team_member.

The team_member table consists of:

Schema::create('team_member', function (Blueprint $table) {
            $table->unsignedInteger('team_id');
            $table->unsignedInteger('member_id');


            $table->foreign('member_id')->references('id')->on('members')
                ->onUpdate('cascade')->onDelete('cascade');

            $table->foreign('team_id')->references('id')->on('teams')
                ->onUpdate('cascade')->onDelete('cascade');

            $table->primary(['team_id', 'member_id']);
        });

and I have a hidden input named "member".

<label for="roles" class="label">Mitglieder</label>
<input type="hidden" name="members" :value="memberSelected">

<b-checkbox-group v-model="memberSelected">
  @foreach ( $members as $member )
    <div class="field">
      <b-checkbox :custom-value="{{ $member->id }}">{{ $member->nickname }}</b-checkbox>
    </div>
  @endforeach
</b-checkbox-group>

<script>
  var app = new Vue({
    el: '#app',
      data: {
        memberSelected: {!! $team->members->pluck('id') !!}
      }
    });
</script>

Inside my controller:

if ($request->members) {
  $team->roles()->sync($id,(explode(',', $request->members)));
}