How to update an objects' value in a @tracked array so that it could reflect the changes on screen in ember js

I have a function called updateData, whenever someone clicks on a cell, I want to update that cell in a array called state, it has 3 objects, and I want to update the key of first object. I tried many ways but none of them seems to be working, any help would be appreciated.

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { action } from "@ember/object";



export default class TictactoeDataService extends Service {

    @tracked state = [{ "one": "1", "two": "", "three": "" }, { "one": "2", "two": "", "three": "" }, { "one": "3", "two": "", "three": "" }]
    get all() {
        return this.state
    }
    @action
    updateData(val) {
        this.state[0].two=val; // not updating 
        this.state=this.state // not working
    }
}