Vue indeterminate checkbox binding

I am using vue for data binding. I want to create a widget for access level control so I need allow , deny and indeterminate states.

the bellow markup is good but there is no indeterminate state :

<div class="row" v-for='a in context.This.Actions'>
    <div class="col-96">
    <input class="custom-control-input access-checkbox" v-bind:id="'chk_'+a.Name" v-bind:value="a.Id" v-model="context.This.RoleActions" indeterminate="true" type="checkbox" />
    <label class="pointer" v-bind:for="'chk_'+a.Name"></label>
    </div>
    </div>

</div>

that variables are :

context.This.Actions = [{"Id": "id_1","Name": "AAA"},{"Id": "id_2","Name": "BBB"},{"Id": "id_3","Name": "CCC"}]

context.This.RoleActions = ["id_1","id_2"]

I want bellow changing :

context.This.RoleActions = [{"id_1":true},{"id_2":false}]

and I expect the bellow result :

the first checkbox : checked the second checkbox : unchecked the other one : indeterminate

any solution?