Elm todo checkbox displays the wrong state

CheckboxDisplayBug.elm

import Html exposing (..)
import Html.Events exposing (..)
import Html.Attributes exposing (..)
import Html.App as App


main : Program Never
main =
    App.beginnerProgram
        { model = init
        , update = update
        , view = view
        }


type alias Model =
    List Todo


type alias Todo =
    { completed : Bool
    , id : Int
    }


init : Model
init =
    [ Todo False 1
    , Todo False 2
    , Todo False 3
    ]


type Msg
    = SetCompleted Int
    | NoOp


update : Msg -> Model -> Model
update msg model =
    case msg of
        SetCompleted target ->
            let
                updateStatus todo =
                    if target == todo.id then
                        Todo True todo.id
                    else
                        todo
            in
                model |> List.map updateStatus

        NoOp ->
            model


view : Model -> Html Msg
view model =
    div []
        [ text "Check items 1 or 2, the next item will display checked when it should be unchecked:"
        , div []
            (model
                |> List.filter (not << .completed)
                |> List.map viewItem
            )
        , text <| toString model
        ]


viewItem : Todo -> Html Msg
viewItem todo =
    div []
        [ input
            [ type' "checkbox"
            , id (toString todo.id)
            , checked todo.completed
            , onCheck
                (\on ->
                    if on then
                        SetCompleted todo.id
                    else
                        NoOp
                )
            ]
            []
        , text <| toString todo.id
        ]

The above code is for Elm v0.17. Paste into http://elm-lang.org/try to see the problem behavior. This might be a bug in the virtual-dom library.

Used Html.Keyed to fix the display bug in https://gist.github.com/dtsao/9fe779b24a24513723a515b63d64e939