JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<select data-bind="foreach: brands">
    <optgroup data-bind="attr: {label: $data}, foreach: $parent.vehicles">
    <!-- ko if: Brand == $parent -->
        <option data-bind="text: Type"></option>
    <!-- /ko -->
    </optgroup>
</select>

JavaScript

var ViewModel = function () {
    var self = this;
    self.vehicles = ko.observableArray([{
        Id: 1,
        Brand: "Volkswagen",
        Type: "Golf"
    }, {
        Id: 2,
        Brand: "Volkswagen",
        Type: "Sharan"
    }, {
        Id: 3,
        Brand: "BMW",
        Type: "118i"
    }, {
        Id: 2,
        Brand: "BMW",
        Type: "525D"
    }]);
    
    self.brands = ko.computed(function(){
        var list = ko.utils.arrayMap(self.vehicles(), function(item){
            return item.Brand;
        });
        
        return ko.utils.arrayGetDistinctValues(list);
    });
};

ko.applyBindings(new ViewModel());