vue.js でselectの生成、ajax版、オブジェクトの場合

セレクトを生成するためのデータがこういう、

        productOptions: {
            A: [
                {text: "pen", value: "PEN"},
                {text: "pencil", value: "PENCIL"}
            ],
            B:[
                {text: "apple", value: "APPLE"},
                {text: "pinapple", value: "PINAPPLE"}
            ]
       }

オブジェクトだったらどうなるだろう。上記のデータはイメージとして、一つ目のセレクトでAを選んだら二つ目のセレクトがpen, pencilになる、というようなものである。

jsonを返すphpがproduct.phpが存在するとして、

        axios.get('product.php').then(function(response) {
            for (var key in response.data) {
                  productOptions[key] = response.data[key];
            }
        }).catch(function(error) {
            console.log('failure:' + new Date())
        });

これでどうだろうか。